css偽元素（before與after）

mo0n1andin 發(fā)布于2019-08-29 18:38 / 1230人閱讀

摘要：最近因?yàn)橐恍┚W(wǎng)頁的需要，比較深入的使用了的偽元素，發(fā)現(xiàn)原來不只是用用或而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀(jì)錄一下。

最近因?yàn)橐恍┚W(wǎng)頁的需要，比較深入的使用了CSS的“偽元素”（Pseudo Element），發(fā)現(xiàn)原來不只是用用before或after而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀(jì)錄一下。

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

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

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

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

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

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

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

google

使用下列的代碼用法，將會(huì)把超鏈接的href內(nèi)容與target內(nèi)容，透過偽元素一前一后的顯示出來。

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

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

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

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

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

content搭配quotes使用
在CSS里有個(gè)不常用的屬性就是quotes，這是做為定義“括號格式”的屬性，也就是如果在一段文字被包住，這段文字的前后就會(huì)出現(xiàn)自定義的括號，而且quotes支持巢狀的結(jié)構(gòu)，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：

最外層第一層第二層第二層第三層

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

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

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

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

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

最外層第一層第二層第二層第三層

CSS的部分比較特別，在偽元素content里使用了open-quote（啟始括號）和close-quote（結(jié)束括號）這兩個(gè)有趣的值，換句話說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;
}

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