偽類before和after用于在被選元素的內容前面或后面插入內容。

請使用 content 屬性來指定要插入的內容。(只能插入內容)

可以設置所插入內容的樣式。

直接上代碼：

div {width:200px; border:1px solid #000; line-height:50px; margin:10px;}

.after,.before {border:1px solid #330;}

.before:before {content:'超帥的'; color:#F00;}

.after:after {content:'的教程'; color:#F00;}

窗外賞雪窗外賞雪

before偽類會在被選的span元素的內容前面插入:before內容

after偽類會在被選的span元素的內容后面插入:after內容

該偽類主要用于清除浮動，現在來看看例子

.frame{background-color:#3FF; width:300px;}

.left{background-color:red; width:100px; height:200px; float:left}

.right{background-color:green; width:100px; height:150px; float:right}

.bottom{background-color:gray; width:300px; height:50px;}

這樣做比較麻煩，需要在浮動div后面新增一個div來清除浮動，我們可以通過after偽類來實現。

.frame{background-color:#3FF; width:300px;}

.left{background-color:red; width:100px; height:200px; float:left}

.right{background-color:green; width:100px; height:150px; float:right}

.bottom{background-color:gray; width:300px; height:50px;}

.clearfix {display: block;}

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

注意：

必須在浮動的div后面添加clean的div，不能在浮動的div里面添加。

因此，不能通過

? ? ? ? ? ?

總結

以上是生活随笔為你收集整理的html中after伪类原理,css伪类before跟after原理与使用（原）的全部內容，希望文章能夠幫你解決所遇到的問題。

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