CSS 偽元素:before, after

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在這裡