什麼是::before和::after？CSS偽元素怎麼用[實作範例]

before
before

CSS的偽元素::before和::after應用可以非常廣泛，而且位置上如果搭配position:relative;和position:absolute;相對位置屬性設定，就堪稱是網頁設計師最靈活的工具之一呢！

還不知道怎麼使用CSS的position相對位置屬性可以按下方連結延伸閱讀，讓你的偽元素應用更廣泛呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

這裡跟各位讀者聊一下我當初在學習偽元素的經歷，當時自學CSS之後，對於偽元素其實並沒有碰過，學習的課程中也完全沒有提過這個方法。

於是當我到職場上，發現這個東西的時候，一開始只覺得好像很神奇，可以透過CSS就完成增加文字內容在段落前後，完全不用去改HTML或內文。

但後來發現怎麼有些標題附近的裝飾，好像也是用偽元素做出來的！？

於是開始研究怎麼生出那些東西，這完全考倒我了，我花了超級大把的時間爬文試圖了解這個東西！
但我無論怎麼研究，就是各種卡關，很多網站的程式碼範例是已經簡化、合併過的，讓我反而越來越搞不清楚到底如何使用它。

今天這篇文章，帶你從頭了解一次，並且用最簡單的範例，實作出加入內文的程式碼，以及實作當時我搞不懂的標題裝飾！

也強烈建議大家一邊實作，讓自己慢慢體會這個概念，最後這技巧才會是你的呦！

初學偽元素::before和::after

什麼是「偽元素」？

「偽元素」英文是「Pseudo」，可以用CSS「憑空創造」一個區塊出來，而且在HTML程式碼後台你並不會看到它存在，但在網頁F12開發人員工具時可以看到。

偽元素實作上常用的有::before、::after、::selection三種，而你會看到它們都有兩個冒號開頭，這跟:hover、:active等操作型的偽類做出區別。

雖然據說有些比較沒有習慣這樣區分的工程師不小心只使用了一個冒號，執行上好像也有成功，但養成好的習慣，也是避免未來程式需要花更多時間debug的好方法噢！

「偽元素」如何運作的？

這個東西簡易來說，是一個可以讓你僅透過CSS檔案，就能增加東西在HTML內文的方式。

實務應用上除了加入文字內容，還能增加各種不同的東西在畫面上，也可以搭配position屬性，讓你增加的東西漂浮在頁面任何你希望他存在的位置呦！

聽起來超厲害的吧！
這邊就透過範例來說明囉！

偽元素::before和::after實作範例

HTML基本設定

想一步一步搞懂的大家，也建議可以直接開啟你的編輯器，懶得打程式碼的話，就算是複製貼上看看效果也好，只有把範例看過去的話有時候也比較難吸收呦！

<!-- HTML -->

<div class="intro">我是艾咖Aikko！</div>

CSS我們先留空，HTML用一個<div>標籤寫下自我介紹，並且給予它一個class當作等等要在CSS使用的樣式名稱。

上方程式碼的結果會顯示這樣：

HTML呈現結果
HTML呈現結果

加上CSS偽元素

接下來我們試著加上偽元素::before和::after的CSS吧！

/* CSS */

.intro::before{
  content: "嗨！大家好，"; /*加入這些內容在整個<div>的前面*/
  color: blue; /*字體為藍色*/
}

.intro::after{
  content: "請多指教！"; /*加入這些內容在整個<div>的後面*/
  color: green; /*字體為綠色*/
}

::before就是可以將創建的內容直接放在整塊<div>標籤內容的前面；
::after則是放在後面，想加入的文字內容可以直接放在content的屬性當中，呈現結果如下：

加入偽元素後的呈現結果
加入偽元素後的呈現結果

用顏色區分就更清楚了，有沒有發現HTML內容完全不用變更，靠著CSS就能加入內容到HTML，完全是我這種底層工程師改不到HTML時的福音啊！

到這裡，你已經學會最簡易的偽元素應用了，趕緊消化練習一下，緊接著我們讓它有更廣泛的應用吧！

偽元素::before或::after輕鬆完成網頁的點綴和線段

網頁的點綴和線段範例

實際到Pinterest找一個有所謂的標題旁點綴元素，像下圖中”HOME >> 99 INSPIRATIONAL…”那段下方橘色長方體，這就可以用偽元素將它製造出來：

網頁範例
DesignerPeople – Pinterest

配合相對位置設定，偽元素隨你放！

還不清楚相對位置position的relative和absolute如何設定嗎？
建議先到下方文章練習看看比較容易看得懂呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

那我們將剛剛的HTML改成圖片上的那串英文，並先將CSS留空：

<!-- HTML -->

<div class="intro">HOME >> 99 INSPIRATIONAL WEBSITE DESIGN TEMPLATES FOR 2020</div>

呈現如下：

範例HTML基本設定
範例HTML基本設定

接下來我們將CSS部分完成：

這裡先來個小提醒，就算沒有使用到content屬性，也一定要寫這個屬性，content屬性和::before、::after是生命共同體！
雙引號內容留空也沒關係，但是不寫的話就不會有作用呦！

/* CSS */

/*那整塊<div>標籤*/
.intro{
  position: relative; /*將整塊<div>當作基準位置*/
  width: 516px; /*設定寬度，讓偽元素的寬度直接設100%*/
}

/*新增的偽元素*/
.intro::before{
  content: ""; /*沒用到仍然要寫，雙引號內容留空*/
  width: 100%; /*設定長方形寬度*/
  height: 10px; /*設定長方形高度*/
  background: #ff7600; /*設定長方形顏色*/
  position: absolute; /*設定與<div>區塊的相對位置*/
  left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
  top: 100%; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
}

完成樣式如下：

範例完成樣式
範例完成樣式

超快速的吧！

到這邊雖然已完成，但也許你心中會有幾個疑惑，我來為大家解答一下。

解決你內心的疑惑

第一個疑惑：
那如果是用::after來寫的話可以嗎？
答案是當然可以！

因為一旦使用了position相對位置屬性後，就直接擺脫了你加的內容是要放在後面還是前面，而是直接按照position相對位置的設定改變位置囉！

第二個疑惑：
為什麼是用.intro這個<div>標籤當作基準呢？
這時我們要到網頁的F12開發人員工具來看看他們的階層關係：

F12開發人員工具檢查
F12開發人員工具檢查

從網頁F12開發人員工具我們可以發現，你剛剛用CSS創造的偽元素::before就在<div>標籤的下一層！
也就是說，::before這個元素你可以想成是一個標籤區塊，套用position相對位置設定後，偽元素設定position:absolute;屬性後的父元素就是<div>標籤區塊了。

因此，我們將<div>標籤區塊設定一個position:relative;屬性，來作為偽元素的基準位置。

這樣你就可以透過top和left等位置屬性，任意調整你創建的偽元素區塊位置了！

::before和::after實務上要小心的地方

使用時務必務必要小心的就是：
::before和::after一定要加入content屬性才會有作用！！！
這點一定要星號再星號⭐⭐⭐⭐⭐

就算沒有要加入文字，也一定要有content屬性，內容留空即可，像這樣：

/* CSS */

.intro::before{
  content: ""; /*雙引號中留空，但必須存在*/
  /*其他屬性設定*/

}

否則若沒有content屬性，你怎麼設定都是無效的呦！！！

就連我之前寫的時候偶爾也會忘記，然後再那邊debug老半天甚至還重複清掉cookie，懊惱為何沒有效果，最後才發現content屬性沒加到偽元素的設定中所以無效，真的是費心又耗時啊！

總結

以上就是最基礎、最基礎的偽元素::before和::after介紹，希望經過這些最基本的說明與範例實作，讓大家不用像我一樣花大把時間還一直搞不懂這在幹嘛！

而偽元素的應用超級廣泛，還能包刮用偽元素創建一個大於符號的箭頭，只要::before和::after分別產出一個長方形並傾斜，就能產出一個純程式碼的箭頭囉！

所以一旦你學會偽元素::before和::after的應用，它的優點就是自由度極高！！
還有只要你有一個HTML標籤作為基底，每一個標籤你都可以建立::before和::after兩個新的區塊出來，讓你不用修改HTML就能完成一堆實用的效果囉！

標籤

為你推薦