一：:before && :after的用法

:before

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

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

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

//在指定元素的內容?me?前添加了新內容?you before

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

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

現在我們再來看下效果：

//由偽元素?:before?生成新內容區域果然變為了塊元素

content 屬性

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

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

配合偽類使用

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

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

配合取值函數 attr() 使用

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

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

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

<a href="http://www.segmentfault.com">專業面向開發者的中文技術問答社區</a>

:after

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

二：偽類和偽元素的區別

偽類種類

偽元素種類

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

?例如：

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

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

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

例如：

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

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

總結：

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

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

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

但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

轉載于:https://www.cnblogs.com/moqiutao/p/4783896.html

總結

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

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