最近因為一些網頁的需要，比較深入的使用了CSS的“偽元素”（Pseudo Element），發現原來不只是用用before或after而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀錄一下。
什麼是“偽元素”？
“偽元素”之所以稱作“偽”，除了英文從“Pseudo”翻譯過來之外，就是因為它並不是真正網頁裡的元素，但行為與表現又和真正網頁元素一樣，也可以對其使用CSS操控。
跟偽元素類似的還有“偽類”（Pseudo classes），在W3C的定義裡總共有五個偽元素（其他仍在測試階段），分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區分，偽元素使用兩個冒號“::”開頭，而偽類使用一個冒號“:”開頭（像是:hover、:target…等）。
雖然現在的瀏覽器就算寫一個冒號也可以正常運作，不過為了方便區分，用兩個冒號還是比較好的，而且不論瀏覽器是什麼，::selection必須是兩個冒號才能正常運作。
認識::before與::after
::before、::after大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before是在原本的元素“之前”加入內容，::after則是在原本的元素“之後”加入內容，同時偽元素也會“繼承”原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。
舉例來說，下面這段程式碼，有一個div內容是“大家好，我是div”，使用::before、::after之後，會在原本div的前後各新增一段文字，並且讓這兩段文字都呈現紅色。
div::before{
content:"我是 before";
color:red;
}
div::after{
content:"我是 after";
color:red;
}複製程式碼
實用的content
上述的內容乍看之下很容易理解，比較需要注意的是一定要具備content的屬性，就算是隻有content:“”；都可以，因為沒有content的偽元素是不會出現在畫面上的，然而content是個很特別的屬性，它可以使用attr直接獲取內容元素的屬性值（attribute），舉例來說，在HTML裡有一個超連結，點選後會彈出新視窗並連線至Google：
<a href="https://www.google.com" target="_blank">google</a>複製程式碼使用下列的程式碼用法，將會把超連結的href內容與target內容，透過偽元素一前一後的顯示出來。
a::before{
content: attr(href);
color:red;
}
a::after{
content: attr(target);
color:green;
}複製程式碼
此外content內容是可以“相加”的，不過用法不像JavaScript使用+號來相連，而是直接用一個空格鍵就可以不斷的累加下去，以下面的程式碼來說，可以在剛剛擷取的超連結文字後方和target屬性前方，加入標點符號。
a::before{
content: "( " attr(href) " ) < ";
color:red;
}
a::after{
content: " > ( " attr(target) " ) ";
color:green;
}
複製程式碼
content甚至可以使用url放入圖片圖片的功能，下列的程式碼會呈現出三張圖片。
div::before{
content:url(圖片網址) url(圖片網址) url(圖片網址);
}複製程式碼
content搭配quotes使用
在CSS裡有個不常用的屬性就是quotes，這是做為定義“括號格式”的屬性，也就是如果在一段文字被<q></q>包住，這段文字的前後就會出現自定義的括號，而且quotes支援巢狀的結構，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：
最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>複製程式碼quotes的屬性如果只寫一層，就會看到只出現一種括號，前後括號使用空白區隔，兩組為一個單位，前後可以不同符號。
q{
quotes: ' < ' ' > ';
}複製程式碼
如果寫了三層，就會看到出現三種括號，支援把文字當作括號使用。
q{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}複製程式碼
同樣的道理，我們可以應用在content裡面，而且透過偽元素已::before和::after已經處於前後的預設位置，甚至不用<q></q>就實現前後括號的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：
最外層<span>第一層<span>第二層</span><span>第二層<span>第三層</span></span></span>複製程式碼CSS的部分比較特別，在偽元素content裡使用了open-quote（啟始括號）和close-quote（結束括號）這兩個有趣的值，換句話說open-quote對應到<q>，close-quote對應到</q>，此外也由於括號是在偽元素內，就可以指定不同的顏色或樣式了。
span{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
content:open-quote;
color:red;
}
span::after{
content:close-quote;
color:#aaa;
}複製程式碼
小結
雖然說偽元素很好用，但偽元素的內容實際上不存在網頁裡（如果開啟瀏覽器的開發者工具，是看不到內容的），所以如果在裡頭塞了太多的重要的內容，反而會影響到SEO的效果，因此對於使用偽元素的定位，還是當作“輔助”性質會比較恰當。
