前幾天的晚上較全面的去看了下css的一些文檔和資料，大部分的樣式運用都沒什么大問題了，只是有些許較陌生，但是也知道他們的存在和實現的是什么樣式。今天主要想在這篇學習筆記中寫的也不多，主要是針對:before和:after寫一些內容，還有幾個小樣式略微帶過的介紹下。

什么是:before和:after？ 該如何使用他們？

:before是css中的一種偽元素，可用于在某個元素之前插入某些內容。
:after是css中的一種偽元素，可用于在某個元素之后插入某些內容。

下面我們先跑個簡單的代碼測試下效果：

<style>p:before{content: "H" /*:before和:after必帶技能，重要性為滿5顆星*/}p:after{content: "d" /*:before和:after必帶技能，重要性為滿5顆星*/}</style><p>ello Worl</p>

以上的代碼將會在頁面中展現的是"Hello World"。我們通過瀏覽器的"審查元素"看到的內容是：

p標簽內部的內容的前面會被插入一個:before偽元素，該偽元素內包含的內容是"H"；而在p標簽內的內容后面會被插入一個:after偽元素，該元素包含的內容是"d"。作為一只合格的程序猴子，捍衛"Hello World"的完整存在是必要的。
既然筆記主要針對是:before和:after，那么肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎么使用他們。

1.結合border寫個對話框的樣式

我們將上面這句話拆成2部分：結合border，寫個對話框的樣式。
既然是結合border，那么我們先轉個小話題，簡單由淺入深的介紹下怎么用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要)：

<style>.triangle{width: 0;height: 0;border-left:50px solid red;border-bottom:50px solid green;border-top:50px solid black;border-right:50px solid pink;}</style><div class="triangle"></div>

我們會得到下面的圖形

我們對上面的樣式做些修改：

.triangle{width: 0;height: 0;border:50px solid transparent; /*這里我們將元素的邊框寬度設置為50px，transparent表示邊框顏色是透明的，solid表示邊框是實線的*/border-top-color: black; /*這里我們僅將上邊框的顏色設置為黑色，眾所周知，css后面的樣式代碼會覆蓋之前的相同的樣式代碼，至于其他三邊的還是透明色*//*border-bottom-color: black; //這里設置底部邊框色為黑色border-left-color: black; //這里設置左邊邊框色為黑色border-right-color:black //這里設置右邊邊框色為黑色*/}

然后這時我們就會看到一個在頂部的方向向下的三角形。解釋已詳細的寫在css樣式的注釋里。

接下來我們加上:before：

<style>.test-div{position: relative; /*日常相對定位*/width:150px;height:36px;border-radius:5px;border:black 1px solid;background: rgba(245,245,245,1)}.test-div:before{content: ""; /*:before和:after必帶技能，重要性為滿5顆星*/display: block;position: absolute; /*日常絕對定位*/top:8px;width: 0;height: 0;border:6px solid transparent;left:-12px;border-right-color: rgba(245,245,245,1);}</style><div class="test-div"></div>

通過以上代碼，我們將會看見一個類似微信/QQ的對話框樣式,但是美中不足的是，在對話框的四周的邊框不是完整的，而是在對話框的突出三角形上是木有邊框的T_T瞬間冷場有木有，該怎么辦呢？召喚:after穿著棉大衣來救場吧~

完整代碼：

<style>.test-div{position: relative; /*日常相對定位*/width:150px;height: 36px;border:1px solid black;border-radius:5px;background: rgba(245,245,245,1)}.test-div:before,.test-div:after{content: ""; /*:before和:after必帶技能，重要性為滿5顆星*/display: block;position: absolute; /*日常絕對定位*/top:8px;width: 0;height: 0;border:6px solid transparent;}.test-div:before{left:-11px;border-right-color: rgba(245,245,245,1);z-index:1}.test-div:after{left:-12px;border-right-color: rgba(0,0,0,1);z-index: 0}</style><div class="test-div"></div>

好了，完整的一個對話框樣式呈現在眼前了，至于對話框的小三角形的方向，相信大家看了上上段對于border介紹的代碼也都知道該怎么做了吧，沒錯，就是改下position的位置，改下border顯示顏色的方位~

2.作為內容的半透明背景層。

比如我們的需求是做一個半透明的登錄框吧(這里也是在代碼中通過注釋來解釋)：

<style>body{background: url(https://dn-mhke0kuv.qbox.me/8fc983c2f5c2e2f2d2ce.jpg) no-repeat left top /*這里加了個圖片背景，用以區分背景的半透明及內容的完全不透明*/}.test-div{position: relative; /*日常相對定位(重要，下面內容也會介紹)*/width:300px;height: 120px;padding: 20px 10px;font-weight: bold;}.test-div:before{position: absolute; /*日常絕對定位(重要，下面內容也會略帶介紹)*/content: ""; /*:before和:after必帶技能，重要性為滿5顆星*/top:0;left: 0;width: 100%; /*和內容一樣的寬度*/height: 100%; /*和內容一樣的高度*/background: rgba(255,255,255,.5); /*給定背景白色，透明度50%*/z-index:-1 /*日常元素堆疊順序(重要，下面內容也會略帶介紹)*/}</style>
<div class="test-div"><table><tr><td>Name</td><td><input placeholder="your name" /></td></tr> <tr><td>Password</td><td><input placeholder="your password" /></td></tr> <tr><td></td><td><input type="button" value="login" /></td></tr></table></div>

當然，:bofore和:after也還有其他更多的巧妙用法，這里也不一一列出來了，這里放上一個用這兩個偽元素加上css3動畫實現一些比較好看及實用的動態效果的鏈接：HoverEffectIdeas

查看更多 請訪問我的獨立博客?https://www.aaz5.com/

?

轉載于:https://www.cnblogs.com/zhouyangla/p/6683815.html

總結

以上是生活随笔為你收集整理的【CSS 技能提升】 :before和:after的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。