before, after
如果你是用 WordPress 架設網站，before, after 這偽元素將會非常有助於調整版面的細節。比之前有提過(參考：WordPress 手機選單增加文字)，很多WordPress的佈景主題，在手機上呈現時選單只呈現出三條線的漢堡選單，還是有些人不知道看到三條線就是可以去點出選單的意思，我們不想讓這些使用者迷路，所以我們想要在三條線前面加上「Menu」的字樣來提醒使用者，就會用到偽元素。
偽元素就是把內容寫在 CSS 裡面，通常CSS只用來宣告屬性樣式、控制版面效果，內容(文字、圖片等)則由 html 標籤負責，但是有時候像 WordPress 這樣的模板架站，我們不是要在哪裡寫入內容都可以的，我們通常能寫進去內容的地方就是「被規定」的那些地方，比如說標題的地方、文章內文的地方等等。
偽元素的基本語法如下：
div::before{
content:"文字內容";
}
content
偽元素一定會搭配 content 屬性，不然我們要加入的內容不會顯示出來。
用以下的例子來說明：
假設本來有一個 div 裡面本來只有一段字為「本來的文字」
<div>本來的文字</div>
我們想要在前面加上一段字叫做「原來是」，而且想要讓這三個字為綠色。然而因為種種原因我們無法直接在這個 DIV 裡面加入文字，所以我們要用 CSS 的方式加進去。
我們先寫一段 CSS 如下：
.addtext::before{/*addtext 這個 CSS 前面都要加上元素*/
content:"原來是";/*加上的元素內容為字串「原來是」*/
color:green;/*顏色是綠色*/
}
然後我們宣告前面那個 div 的 CSS 屬性為addtext
<div class="addtext">本來的文字</div>
呈現出來的結果如下：
原來是本來的文字
在 content 裡面換行
那如果要在 content 裡面做換行怎麼辦？我們如果只是加上<br>，會發現這個”<br>”的字樣會直接輸出，完全不給臉。
我們應該要這樣寫（下面那個\A （←這裡有空格）的地方，就是換行的地方）
content:"在這之後要換行 \A 在這之前要換行; white-space: pre-line;
呈現出來的結果會是：
在這之後要換行
在這之前要換行
content 加入圖片
content 也可以加入圖片，語法如下：
content:url(圖片網址)
attr 語法
content 屬性加入 attr 可以提取屬性標籤裡面的「值」，比如說 <img src=”123.jpg”> 我們可以用 attr 來提取 img 標籤裡面 src 的值，也就是「123.jpg」
.oak::before{
content: attr(src);
color:blue;
}
<img src="abc.jpg" class="oak">
呈現的結果如下，「abc.jpg」被提取出來放在圖片前面
abc.jpg
連接(增加) content 值
如果想要增加 conttent 的值，只要用空格隔開就好了，不是用「+」或「. 」
把上面的 CSS 改成這樣的話
.oak::before{
content: attr(src) "在這裡";
color:blue;
}
呈現出來會如下：
abc.jpg在這裡