CSS3中偽元素::before和::after的用法示例
我要評(píng)論前言
眾所周知::before與::after兩個(gè)偽元素其實(shí)是CSS3中的內(nèi)容，然而實(shí)際上在CSS2中就已經(jīng)有了這兩者的身影，只不過(guò)CSS2中是前面加一個(gè)冒號(hào)來(lái)表示（:before和:after）。今天主要講講這兩個(gè)偽元素該如何使用。
一、與普通元素一樣可以給其添加樣式
比如說(shuō)我想在文字前面添加一個(gè)圖標(biāo)，如果我用普通元素寫(xiě)的話我可以這樣寫(xiě)：
/*CSS*/
.del{ font-size: 20px;}
.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle;
background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}
/*HTML*/ <div class="del"><i></i><span>刪除</span></div>
但是放個(gè)空的 i 標(biāo)簽總感覺(jué)很不爽，直接把它去掉吧！
/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle;
background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}
/*HTML*/ <div class="del"><span>刪除</span></div>
這里就直接用::before偽元素代替了空的 i 標(biāo)簽，兩者效果相同：
同樣利用這一點(diǎn)，我們可以使用::after偽元素解決經(jīng)典清除浮動(dòng)的問(wèn)題：
.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }
當(dāng)然，如果你網(wǎng)站還需要兼容IE8，那還是用:after吧，::after不兼容。
二、在元素中插入文本
有時(shí)候我可能需要在許多元素中同時(shí)加入相同的文字，那么可以考慮用這兩個(gè)偽元素。例如：
/*CSS*/
.up:after{ content: '↑'; color: #f00;}
.down:after{ content: '↓'; color: #0f0;}
/*HTML*/ <p class="up">上升</p> <p class="down">下降</p>
實(shí)現(xiàn)效果如下：
三、在元素中插入圖像
實(shí)現(xiàn)類似本文第一個(gè)例子中的圖片加文字效果，也可以使用偽元素直接插入圖片而不需要使用背景圖，就像這樣：
/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }
.del span{ vertical-align: middle;}
但是需要非常注意的是，使用這種方式插入的圖片并不能通過(guò)控制偽元素的大小來(lái)改變圖片的大小，只能引入固定大小的圖片（這個(gè)略坑啊...），所以個(gè)人覺(jué)得最好還是老老實(shí)實(shí)用背景圖片比較好。
四、插入連續(xù)項(xiàng)目編號(hào)
可能你會(huì)說(shuō)，加入連續(xù)項(xiàng)目編號(hào)還不簡(jiǎn)單嗎？直接用有序列表ol不就行了嘛！
是，確實(shí)是可以實(shí)現(xiàn)，就像這樣：
<p>我的愛(ài)好：</p>
<ol>
<li>吃飯</li>
<li>睡覺(jué)</li>
<li>打豆豆</li>
</ol>
這是Chrome下的效果：
看起來(lái)挺好，沒(méi)啥問(wèn)題，那我若想給前面的序號(hào)加粗呢？一臉懵逼了...
這時(shí)候你說(shuō)，那我直接在每條文字前手動(dòng)加標(biāo)簽和數(shù)字，然后給標(biāo)簽加上樣式不就行了么？
/*CSS*/
ul li{ list-style: none;}
ul li span{ font-weight: bold;}
/*HTML*/
<p>我的愛(ài)好：</p>
<ul>
<li><span>1.</span>吃飯</li>
<li><span>2.</span>睡覺(jué)</li>
<li><span>3.</span>打豆豆</li>
</ul>
沒(méi)錯(cuò)，現(xiàn)在是三條，要是是三十條，三百條，怎么辦？一條條加？（很傻很天真...）
這時(shí)候若用純CSS的方式，還得用到偽元素：
/*CSS*/
ul li{ list-style: none; counter-increment: number;} //number相當(dāng)于是個(gè)變量，隨便取名就好，在偽元素中調(diào)用
ul li::before{ content: counter(number)"."; font-weight: bold;} //注意這里不同于JS，counter(number)與"."之間不需要加任何東西，直接連接就好
/*HTML*/
<p>我的愛(ài)好：</p>
<ul>
<li>吃飯</li>
<li>睡覺(jué)</li>
<li>打豆豆</li>
</ul>
效果如下：
那我如果不想要阿拉伯?dāng)?shù)字，我就想用中文數(shù)字可以么？
可以！偽元素很好很強(qiáng)大！
ul li{ list-style: none; counter-increment: number;}
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}
效果如下：
除了這個(gè)cjk-ideographic，你還可以使用更多CSS中 list-style-type 屬性：（直接貼上w3cshool里面的表格）
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了CSS 列表模型之marker標(biāo)記的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-07-23
這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-09-01什么是BFC？ CSS 使用偽元素清除浮動(dòng)的方法
塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動(dòng)的方2019-07-01
本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場(chǎng)景，如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形，感興趣的朋友一起看看吧2018-02-07
本文介紹了什么是 ::marker 以及它的一些實(shí)用場(chǎng)景，可以看出雖然 ::before 、::after 也能實(shí)現(xiàn)類似的功能，但 CSS 還是提供了更具有語(yǔ)義化的標(biāo)簽 ::marker，也表明了大家需2021-06-25
