::before 和 ::after 是 CSS 偽元素，主要用於在不改變 HTML 結構的情況下，在元素的前後插入內容或樣式（例如文字、符號或圖片）。這些偽元素經常被用來添加裝飾性或輔助性的信息，讓開發者可以靈活控制頁面元素的外觀。

需注意的是，::before 和 ::after 必須使用 content 屬性指定要顯示的內容，否則不會有任何效果。

💠 ::before 基本用法

語法

選擇器::before { 
	content: 內容;
	屬性名: 屬性值; 
}

• 選中元素之前插入內容，需以 content 指定，如沒內容可指定空字串

範例

在段落文字前插入通知符號：

<p>中秋節快樂</p>
<p>國慶日快樂</p>
<p>聖誕節快樂</p>

p::before {
	content: "📢";
  margin-right: 16px;
}

💠 ::after 基本用法

語法

選擇器::after { 
	content: 內容;
	屬性名: 屬性值; 
}

• 選中元素之後插入內容，需以 content 指定，如沒內容可指定空字串

範例

在段落文字後插入愛心符號：

<p>中秋節快樂</p>
<p>國慶日快樂</p>
<p>聖誕節快樂</p>

p::after {
	content: "❤️";
  margin-left: 16px;
}

💠 實務應用一：價格標示

一起試試：［CODEPEN］

在價格前後插入固定符號如貨幣單位和小數點格式，讓價格顯得更專業。

  <p>100</p>
  <p>1500</p>
  <p>2000</p>

p::before {
	content: "NT$";
  color: chocolate;
  margin-right: 4px;
}

p::after {
	content: ".00";
}

這樣能在每個價格前自動顯示 "NT$"，並在後面加上小數點格式化。

💠 實務應用二：客製單選框

一起試試：［CODEPEN］

前面的 :checked 文章有講到可以自行客製單選框、複選框，利用偽元素也可以自定義單選框，創造美觀的 UI 元素。

步驟一： 先把單選框 radio、<label> 放上

<input type="radio" id="radio1" name="group" checked>
<label class="custom-radio" for="radio1">Option 1</label>

<input type="radio" id="radio2" name="group">
<label class="custom-radio" for="radio2">Option 2</label>

步驟二： 隱藏原生 radio 單選框，定義尚未選中的 radio 外觀

/* 隱藏原生 radio button */
input[type="radio"] {
  display: none;
}

/* 定義 radio 的外觀 */
.custom-radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 44px;
  margin-right: 15px;
  font-size: 24px;
  font-weight: bold;
}

/* 未選中的外框樣式 */
.custom-radio::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-radius: 50%;
  background-color: #fff;
}

步驟三： 定義選中 radio 時的樣式

/* 選中的樣式 */
input[type="radio"]:checked + label::before {
  background-color: #fa8c0d;
  border-color: #df7800;
}

/* 圓心效果 */
input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 4.5px;
  width: 16px;
  height: 16px;
  background-color: #fff0ba;
  border-radius: 50%;
}

完整程式碼

<input type="radio" id="radio1" name="group" checked>
<label class="custom-radio" for="radio1">Option 1</label>

<input type="radio" id="radio2" name="group">
<label class="custom-radio" for="radio2">Option 2</label>

/* 隱藏原生 radio button */
input[type="radio"] {
  display: none;
}

/* 定義 radio 的外觀 */
.custom-radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 44px;
  margin-right: 15px;
  font-size: 24px;
  font-weight: bold;
}

/* 未選中的外框樣式 */
.custom-radio::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-radius: 50%;
  background-color: #fff;
}

/* 選中的樣式 */
input[type="radio"]:checked + label::before {
  background-color: #fa8c0d;
  border-color: #df7800;
}

/* 圓心效果 */
input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 4.5px;
  width: 16px;
  height: 16px;
  background-color: #fff0ba;
  border-radius: 50%;
}

💠 總結

::before 和 ::after 是強大的工具，能夠靈活地在不更動 HTML 結構的前提下，插入內容來改善頁面外觀或增強用戶體驗。它們可以用來設計價格標示、客製化 UI 控件、裝飾性內容等。藉由合理應用這些偽元素，我們可以讓網站看起來更專業且具備高度的可擴展性。

本文將同步更新至 Lala Code