一：:before && :after的用法

:before

如同對偽元素的名稱一樣，:before?是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。舉例說明：

.before:before{content:'you before'; color:red;}<div class="before"> me</div>

在這里我們給偽元素?:before?添加了屬性?content，并賦值為?you before。我們來看效果：

//在指定元素的內(nèi)容?me?前添加了新內(nèi)容?you before

我們不難發(fā)現(xiàn)這里通過偽元素?:before?添加的新內(nèi)容區(qū)域默認的?display?屬性值為?inline，那么我們可不可以修改新內(nèi)容區(qū)域的屬性，答案是肯定的。你可以像修改其他元素一樣修改它的樣式，我們來將它的?display?屬性值來改為block。

.before:before{content:'you before'; display:block; color:red;} <div class="before"> me</div>

現(xiàn)在我們再來看下效果：

//由偽元素?:before?生成新內(nèi)容區(qū)域果然變?yōu)榱藟K元素

content 屬性

對于偽元素?:before?和?:after?而言，屬性?content?是必須設(shè)置的，我們知道屬性的值可以為字符串，也可以有其它形式，比如指向一張圖片的?URL:

content: url( "img/icon.png" )

配合偽類使用

偽元素?:before?還可以配合偽類使用，這里舉經(jīng)常與?:before?配合使用的偽類?:hover?為例：

.before:hover:before{content:'you before'; color:red;} <div class="before"> me</div>

配合取值函數(shù) attr() 使用

還有一種較為常見的用法，即配合取值函數(shù)?attr()?一起使用，如：

a::before{content: attr(title)} <a href="http://www.segmentfault.com" title="專業(yè)面向開發(fā)者的中文技術(shù)問答社區(qū)"></a>

這個達到的效果跟下面一樣：

<a href="http://www.segmentfault.com">專業(yè)面向開發(fā)者的中文技術(shù)問答社區(qū)</a>

:after

偽元素?:after?與 偽元素?:before?類型相同，只不過它指定的屬性?content?值為出現(xiàn)在指定元素內(nèi)容的后面，說明省。

二：偽類和偽元素的區(qū)別

偽類種類

偽元素種類

偽類：作用對象是整個元素?

?例如：

a:link{color:#111} a:hover{color:#222} div:first-child{color:#333} div:nth-child(3){color:#444}

盡管這些條件不是基于DOM的，但結(jié)果每一個都是作用于一個完整的元素，比如整個鏈接，段落，div等等。

偽元素：作用于元素的一部分

例如：

p::first-line{color:#555} p::first-letter{color:#666} a::before{content : "helloworld";}

偽元素作用于元素的一部分：一個段落的第一行 或者 第一個字母。

總結(jié)：

偽元素其實相當于偽造了一個元素，例如before,first-letter達到的效果就是偽造了一個元素，然后添加了其相應(yīng)的效果而已；

而偽類沒有偽造元素，例如first-child只是給子元素添加樣式而已。

偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿，但實際上?css3?為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。

但因為兼容性的問題，所以現(xiàn)在大部分還是統(tǒng)一的單冒號，但是拋開兼容性的問題，我們在書寫時應(yīng)該盡可能養(yǎng)成好習慣，區(qū)分兩者。

轉(zhuǎn)載于:https://www.cnblogs.com/moqiutao/p/4783896.html

總結(jié)

以上是生活随笔為你收集整理的CSS之 :before :after的用法，伪类和伪元素的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。