點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

偽元素::before與::after的用法實例教程

來源：懂視網責編：小采時間：2020-11-27 15:31:24

偽元素::before與::after的用法實例教程

偽元素::before與::after的用法實例教程:::before與::after兩個偽元素其實是CSS3中的內容，然而實際上在CSS2中就已經有了這兩者的身影，只不過CSS2中是前面加一個冒號來表示（:before和:after）。今天主要講講這兩個偽元素該如何使用。一、與普通元素一樣可以給其添加樣式比如說我想在文字前面添加一

推薦度：

點擊下載本文 文檔為doc格式

導讀偽元素::before與::after的用法實例教程:::before與::after兩個偽元素其實是CSS3中的內容，然而實際上在CSS2中就已經有了這兩者的身影，只不過CSS2中是前面加一個冒號來表示（:before和:after）。今天主要講講這兩個偽元素該如何使用。一、與普通元素一樣可以給其添加樣式比如說我想在文字前面添加一

::before與::after兩個偽元素其實是CSS3中的內容，然而實際上在CSS2中就已經有了這兩者的身影，只不過CSS2中是前面加一個冒號來表示（:before和:after）。今天主要講講這兩個偽元素該如何使用。

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

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

/*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>

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

/*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 標簽，兩者效果相同：

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

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

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

二、在元素中插入文本

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

/*CSS*/.up:after{ content: '↑'; color: #f00;}.down:after{ content: '↓'; color: #0f0;}

/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

實現效果如下：

三、在元素中插入圖像

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

/*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;}

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

四、插入連續項目編號

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

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

<p>我的愛好：</p><ol><li>吃飯</li><li>睡覺</li><li>打豆豆</li></ol>

這是Chrome下的效果：

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

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

/*CSS*/ul li{ list-style: none;}ul li span{ font-weight: bold;}

/*HTML*/<p>我的愛好：</p><ul><li><span>1.</span>吃飯</li><li><span>2.</span>睡覺</li><li><span>3.</span>打豆豆</li></ul>

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

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

/*CSS*/ul li{ list-style: none; counter-increment: number;} //number相當于是個變量，隨便取名就好，在偽元素中調用ul li::before{ content: counter(number)"."; font-weight: bold;} //注意這里不同于JS，counter(number)與"."之間不需要加任何東西，直接連接就好

/*HTML*/<p>我的愛好：</p><ul><li>吃飯</li><li>睡覺</li><li>打豆豆</li></ul>

效果如下：

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

可以！偽元素很好很強大！

ul li{ list-style: none; counter-increment: number;} 
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

效果如下：

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

偽元素::before與::after的用法實例教程

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用用法教程

熱門焦點

偽元素::before與::after的用法實例教程

偽元素::before與::after的用法實例教程

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

二、在元素中插入文本

三、在元素中插入圖像

四、插入連續項目編號

偽元素::before與::after的用法實例教程

最新推薦

猜你喜歡

熱門推薦