近因?yàn)橐恍┚W(wǎng)頁的需要，需要比較深入的使用了CSS 的「偽元素」( Pseudo Element )，發(fā)現(xiàn)原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對你的日常工作有所幫助。

什么是「偽元素」？

「偽元素」之所以稱作「偽」，除了英文從「Pseudo」翻譯過來之外，就是因?yàn)樗⒉皇钦嬲W(wǎng)頁里的元素，但行為與表現(xiàn)又和真正網(wǎng)頁元素一樣，也可以對其使用CSS 操控。

跟偽元素類似的還有「偽類」( Pseudo classes )，在W3C的定義里總共有五個偽元素(其他仍在測試階段)，分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區(qū)分，偽元素使用兩個冒號「::」開頭，而偽類使用一個冒號「:」開頭(像是:hover、:target...等)。

雖然現(xiàn)在的瀏覽器就算寫一個冒號也可以正常運(yùn)作，不過為了方便區(qū)分，用兩個冒號還是比較好的，而且不論瀏覽器是什么，::selection必須是兩個冒號才能正常運(yùn)作。

參考：MDN Pseudo-elements、偽類child和of-type

認(rèn)識::before 與::after

::before、::after大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before是在原本的元素「之前」加入內(nèi)容，::after則是在原本的元素「之后」加入內(nèi)容，同時偽元素也會「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。

舉例來說，下面這段程式碼，有一個div 內(nèi)容是「大家好，我是div」，使用::before、::after 之后，會在原本div 的前后各添加一段文字，并且讓這兩段文字都呈現(xiàn)紅色。

div::before{
 content:"我是 before";
 color:red;
}
div::after{
 content:"我是 after";
 color:red;
}

實(shí)用的content

上述的內(nèi)容乍看之下很容易理解，比較需要注意的是一定要具備content的屬性，就算是只有content:"";都可以，因?yàn)闆]有content的偽元素是不會出現(xiàn)在畫面上的，然而content是個很特別的屬性，它可以使用attr直接獲取內(nèi)容元素的屬性值( attribute )，舉例來說，在HTML里有一個超連結(jié)，點(diǎn)擊后會彈出新視窗并連結(jié)至Google：

<a  target="_blank">google</a>

使用下列的程式碼用法，將會把超連結(jié)的href 內(nèi)容與target 內(nèi)容，透過偽元素一前一后的顯示出來。

a::before{
 content: attr(href);
 color:red;
}
a::after{
 content: attr(target);
 color:green;
}

此外content內(nèi)容是可以「相加」的，不過用法不像JavaScript使用+號來相連，而是直接用一個空白鍵就可以不斷的累加下去，以下面的程式碼來說，可以在剛剛擷取的超連結(jié)文字后方和target屬性前方，加入標(biāo)點(diǎn)符號。

a::before{
 content: "( " attr(href) " ) < ";
 color:red;
}
a::after{
 content: " > ( " attr(target) " ) ";
 color:green;
}

content 甚至可以使用url 放入圖片的功能，下列的程式碼會呈現(xiàn)出三張圖片。

div::before{
 content:url(圖片網(wǎng)址) url(圖片網(wǎng)址) url(圖片網(wǎng)址);
}

通過調(diào)整border的屬性，我們可以實(shí)現(xiàn)上下左右的三角形，再結(jié)合偽元素before，after，content可以繪制多種多邊形，筆者在這篇文章有過介紹，感興趣的可以看看 ：只用1個div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？

content搭配quotes使用

在CSS里有個不常用的屬性就是quotes，這是做為定義「括號格式」的屬性，也就是如果在一段文字被包住，這段文字的前后就會出現(xiàn)自定義的標(biāo)簽替換（可以是括號、特殊符合、文字等），而且quotes支持多層嵌套，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>

quotes 的屬性如果只寫一層，就會看到只出現(xiàn)一種括號，前后括號使用空白分隔，兩組為一個單位，前后可以不同符號。

q{
 quotes: ' < ' ' > ';
}

如果寫了三層，就會看到出現(xiàn)三種括號，也會把文字當(dāng)作括號使用。

q{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

（請注意開合標(biāo)簽的就近分配原則）

同樣的道理，我們可以應(yīng)用在content里面，而且通過偽元素::before和::after處于前后的預(yù)設(shè)位置，甚至不用就實(shí)現(xiàn)前后括號的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：

最外層<span>第一層<span>第二層</span><span>第二層<span>第三層</span></span></span>

CSS的部分比較特別，在偽元素content里使用了open-quote (啟始括號)和close-quote (結(jié)束括號)這兩個有趣的值，換句話說open-quote對應(yīng)到，close-quote對應(yīng)到，此外也由于括號是在偽元素內(nèi)，就可以指定不同的顏色或樣式了。

span{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
 content:open-quote;
 color:red;
}
span::after{
 content:close-quote;
 color:#aaa;
}

文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html

原文作者：oxxostudio

由于網(wǎng)頁為繁體內(nèi)容，術(shù)語描述和標(biāo)點(diǎn)話術(shù)的差異的問題，筆者在保證不改變原意的基礎(chǔ)上做了調(diào)整，并且內(nèi)容頁進(jìn)行了驗(yàn)證確認(rèn)無誤，歡迎大家指正。

小結(jié)

雖然說偽元素很好用，但偽元素的內(nèi)容實(shí)際上不存在網(wǎng)頁里( 如果打開瀏覽器的開發(fā)者工具，是看不到內(nèi)容的)，所以如果在里頭塞了太多的重要的內(nèi)容，反而會影響到SEO 的成效，因此對于使用偽元素的定位，還是當(dāng)作「輔助」性質(zhì)會比較恰當(dāng)。

于CSS中的：before和：after偽元素，相信大家都不陌生，下面就來講解下這些元素的具體運(yùn)用！

:before是css中的一種偽元素，可用于在某個元素之前插入某些內(nèi)容。

:after是css中的一種偽元素，可用于在某個元素之后插入某些內(nèi)容。

先來個實(shí)例：

<style>

p:before{ content: "H" }

p:after{ content: "d" }

</style>

<p>ello Worl</p>

以上代碼會在頁面展示是：Hello World

在瀏覽器審查元素中的內(nèi)容是

p標(biāo)簽內(nèi)部的內(nèi)容的前面會被插入一個:before偽元素，該偽元素內(nèi)包含的內(nèi)容是"H"；而在p標(biāo)簽內(nèi)的內(nèi)容后面會被插入一個:after偽元素，該元素包含的內(nèi)容是"d"。

上面只是簡單的入門這兩者元素之間的簡單格式運(yùn)用，下面來看看平常該怎么使用它們。

結(jié)合border寫個對話框樣式

首先要實(shí)現(xiàn)對話框，先來實(shí)現(xiàn)border畫三角形樣式

<style>

.triangle{

width: 0;

height: 0;

border:50px solid transparent;

border-top-color: black;

}

</style>

<div class="triangle"></div>

得到了一個頂部方向向下的三角形

接下來我們加上:before和:after：

<style>

.test-div{

position: relative;

width:150px;

height: 36px;

border:1px solid black;

border-radius:5px;

background: rgba(245,245,245,1)

}

.test-div:before,.test-div:after{

content: "";

display: block;

position: absolute;

top:8px;

width: 0;

height: 0;

border:6px solid transparent;

}

.test-div:before{

left:-11px;

border-right-color: rgba(245,245,245,1);

z-index:1

}

.test-div:after{

left:-12px;

border-right-color: rgba(0,0,0,1);

z-index: 0

}

</style>

<div class="test-div"></div>

效果如下：

運(yùn)用偽元素就能做出一個對話框圖形出來了，當(dāng)然運(yùn)用:before和:after還能更方便的制作出很多效果，下節(jié)再講解講解！