before 和 after其實就是附着在元素前後的僞元素，說他是僞元素的意思就是，元素不是在DOM中生成的，而是在浏覽器渲染引擎渲染CSS的時候畫上去的，這篇文章主要給大家介紹了關于CSS3中僞元素::before和::after的用法。

一、與普通元素一樣可以給其添加樣式

比如說我想在文字前面添加一個圖标，如果我用普通元素寫的話我可以這樣寫：

但是放個空的 i 标簽總感覺很不爽，直接把它去掉吧：

這裡就直接用::before僞元素代替了空的 i 标簽，兩者效果相同：

同樣利用這一點，我們可以使用::after僞元素解決經典清除浮動的問題：

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

當然，如果你網站還需要兼容IE8，那還是用:after吧，::after不兼容。

二、在元素中插入文本

有時候我可能需要在許多元素中同時加入相同的文字，那麼可以考慮用這兩個僞元素。例如：

實現效果如下：

三、在元素中插入圖像

實現類似本文第一個例子中的圖片加文字效果，也可以使用僞元素直接插入圖片而不需要使用背景圖，就像這樣：

但是需要非常注意的是，使用這種方式插入的圖片并不能通過控制僞元素的大小來改變圖片的大小，隻能引入固定大小的圖片（這個略坑啊...），所以個人覺得最好還是老老實實用背景圖片比較好。

四、插入連續項目編号

可能你會說，加入連續項目編号還不簡單嗎？直接用有序列表ol不就行了嘛！

是，确實是可以實現，就像這樣：

<p>我的愛好：</p>

<ol>

<li>吃飯</li>

<li>睡覺</li>

<li>打豆豆</li>

</ol>

這是Chrome下的效果：

看起來挺好，沒啥問題，那我若想給前面的序号加粗呢？一臉懵逼了...

這時候你說，那我直接在每條文字前手動加标簽和數字，然後給标簽加上樣式不就行了麼？

沒錯，現在是三條，要是是三十條，三百條，怎麼辦？一條條加？（很傻很天真...）

這時候若用純CSS的方式，還得用到僞元素：

效果如下：

那我如果不想要阿拉伯數字，我就想用中文數字可以麼？

可以，僞元素很好很強大：

效果如下：

除了這個cjk-ideographic，你還可以使用更多CSS中 list-style-type 屬性：（直接貼上w3cshool裡面的表格）

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部