在CSS中，::before 偽元素可用于在元素的內(nèi)容前插入新內(nèi)容，它經(jīng)常與content 屬性一起使用，以在網(wǎng)頁上實(shí)現(xiàn)各種裝飾和設(shè)計(jì)效果。

基本用法

假設(shè)你有一個(gè)段落，你希望在每個(gè)段落前都有一個(gè)裝飾性的引號(hào)，你可以使用::before 偽元素來實(shí)現(xiàn)這一點(diǎn)：

p::before {
    content: "“";
}

這段CSS代碼會(huì)在每個(gè)<p> 元素的內(nèi)容前插入一個(gè)引號(hào)。

嵌套使用

::before 偽元素可以嵌套在其他元素內(nèi)，以實(shí)現(xiàn)更復(fù)雜的布局和設(shè)計(jì)，你可以在一個(gè)列表中的每個(gè)項(xiàng)目前添加一個(gè)裝飾性的序號(hào)：

ul li::before {
    content: counter(item, decimal-leading-zero) ". ";
}

這段CSS代碼會(huì)在每個(gè)列表項(xiàng)<li> 的內(nèi)容前插入一個(gè)序號(hào)，序號(hào)從1開始，并且?guī)в星皩?dǎo)零。

與其他偽元素結(jié)合使用

::before 偽元素還可以與其他偽元素結(jié)合使用，以實(shí)現(xiàn)更復(fù)雜的效果，你可以在一個(gè)鏈接的旁邊添加一個(gè)裝飾性的圖標(biāo)：

a::before {
    content: url("icon.png");
}

這段CSS代碼會(huì)在每個(gè)鏈接<a> 的旁邊添加一個(gè)圖標(biāo)，圖標(biāo)路徑為 "icon.png"。

注意事項(xiàng)

1、::before 偽元素創(chuàng)建的內(nèi)容并不實(shí)際存在于DOM中，它們是純粹的樣式裝飾。

2、使用::before 時(shí)，要注意避免與元素的真實(shí)內(nèi)容混淆，如果你在一個(gè)元素的內(nèi)容前和內(nèi)部都使用了::before，那么外部的::before 會(huì)覆蓋內(nèi)部的::before。

3、當(dāng)使用::before 來添加內(nèi)容時(shí)，要確保你的內(nèi)容不會(huì)影響到頁面的其他部分，特別是當(dāng)使用***定位或浮動(dòng)定位時(shí)。