Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

Day28-::before & ::after 利用 CSS 偽元素增強網頁內容的魅力

發表於 更新於 分類於 Disqus：

::before&::after

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

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



💠 ::before 基本用法

語法

1
2
3
4
選擇器::before {
  content: 內容;
  屬性名: 屬性值;
}
  • 選中元素之前插入內容，需以 content 指定，如沒內容可指定空字串

範例

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

1
2
3
<p>中秋節快樂</p>
<p>國慶日快樂</p>
<p>聖誕節快樂</p>
1
2
3
4
p::before {
  content: "📢";
  margin-right: 16px;
}

::before



💠 ::after 基本用法

語法

1
2
3
4
選擇器::after {
  content: 內容;
  屬性名: 屬性值;
}
  • 選中元素之後插入內容，需以 content 指定，如沒內容可指定空字串

範例

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

1
2
3
<p>中秋節快樂</p>
<p>國慶日快樂</p>
<p>聖誕節快樂</p>
1
2
3
4
p::after {
  content: "❤️";
  margin-left: 16px;
}

::after



💠 實務應用一：價格標示

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

1
2
3
<p>100</p>
<p>1500</p>
<p>2000</p>
1
2
3
4
5
6
7
8
9
p::before {
  content: "NT$";
  color: chocolate;
  margin-right: 4px;
}

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

See the Pen ::before&::after by Lala (@bobee) on CodePen.

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



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

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

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

1
2
3
4
5
<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>

::before&::after



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 隱藏原生 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;
}

::before&::after



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 選中的樣式 */
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%;
}

See the Pen custom-radio by Lala (@bobee) on CodePen.



完整程式碼

1
2
3
4
5
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/* 隱藏原生 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 控件、裝飾性內容等。藉由合理應用這些偽元素，我們可以讓網站看起來更專業且具備高度的可擴展性。



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️