探索 CSS 偽元素：::before 和 ::after

應讀者的要求（誰？），今天要講 CSS 偽元素中的 ::before 和 ::after。

這兩個偽元素在網頁設計中非常有用，可以用來在元素的內容前後插入額外的內容，而不需要改變 HTML 結構。

讓我們深入了解這些強大的工具，並看看如何在實際應用中使用它們。

先附上以下範例的程式碼 https://codepen.io/hjxu/pen/VwOQMBO?editors=1100

偽元素是什麼？

CSS 偽元素是用來設計文檔的特定部分的元素。例如，::before 和 ::after 可以用來在一個元素的內容之前或之後插入內容。它們通常用來裝飾元素，增加視覺效果。

使用上需要注意的地方

  1. content 屬性：content 是偽元素的必需屬性。如果沒有這個屬性，偽元素將不會顯示。即使是插入空字符串，也必須明確設置。
  2. display 屬性：默認情況下，::before 和 ::after 是行內元素。如果需要改變這個行為，可以設置 display 屬性，如 inline-block 或 block。
  3. 層級問題：偽元素的層級是基於父元素的，因此可以通過 z-index 和 position 屬性來控制顯示順序。

::before 和 ::after 的基本用法

這兩個偽元素的語法非常簡單，只需要在選擇器後面加上 ::before 或 ::after，然後使用 content 屬性來指定插入的內容。

1
2
3
4
5
6
7
.element::before {
    content: "前置內容";
}

.element::after {
    content: "後置內容";
}

讓我們通過一個簡單的例子來看看它們的實際應用。

HTML：

1
2
3
<div class="container">
    <p class="element">這是一段文字。</p>
</div>

CSS：

1
2
3
4
5
6
7
8
9
10
11
.element::before {
    content: "🎉";
    display: inline-block;
    margin-right: 8px;
}

.element::after {
    content: "🎈";
    display: inline-block;
    margin-left: 8px;
}

在這個例子中，我們在段落元素的內容前後分別插入了一個派對圖示和一個氣球圖示。效果如下：

1
🎉 這是一段文字。 🎈

我們可以用偽元素來創建更多複雜的效果。假設我們想為一個按鈕添加一個漂亮的漸變背景和一個陰影效果。

HTML：

1
<button class="fancy-button">點擊我</button>

CSS：

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
.fancy-button {
    position: relative;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: white;
}

.fancy-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #f06, #f90);
    z-index: -1;
    transition: all 0.3s ease;
}

.fancy-button::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.2);
    z-index: -2;
    transition: all 0.3s ease;
}

.fancy-button:hover::before {
    transform: scale(1.1);
}

.fancy-button:hover::after {
    transform: scale(0.9);
}

這段 CSS 使用 ::before 和 ::after 偽元素為按鈕添加了漸變背景和陰影效果，並且在懸停時會有一個放大的動畫效果：

fancy btn

偽元素常見應用場景

  1. 裝飾線條、圖標：為標題或段落添加裝飾線條或背景；在按鈕或導航鏈接前後添加圖標。
  2. 清除浮動：

在使用浮動布局時，浮動元素的父容器高度可能會崩塌，導致布局錯亂。因為 float 屬性顧名思義就是浮動到上面一層，像被抬起來一樣，那麼接下來的佈局自然會往上鑽。又或者說，是讓浮動元素的高度被忽略。

使用 ::after 偽元素可以幫助清除浮動，也就是讓浮動元素的高度被看見，後面的元素就不敢往前擠了。

舉個栗子🌰：

HTML：

1
2
3
4
5
<div class="clearfix">
    <div class="box float-left">float 1</div>
    <div class="box float-right">float 2</div>
</div>
<div class="bottom">bottom</div>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

在這個例子中，.clearfix 容器內部的兩個浮動元素的浮動被清除，容器高度得以恢復，避免布局錯亂。

float1 和 float 2 區塊是懸浮狀態時，bottom 區塊就上移

加了 .clearfix 之後，bottom回復原位

4. hover 時輔助文本和提示訊息

使用 ::before 和 ::after 偽元素可以創建簡單的工具提示（tooltip），增加用戶交互體驗。

示例：

HTML：

1
2
3
4
<div class="tooltip">hover me
    <span class="tooltip-text">tooltip content</span>
</div>

CSS：

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
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* 提示框出現在上方 */
    left: 100%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltip-text::after { /* 此為對話框的箭頭 */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

在這個例子中，當用戶懸停在 .tooltip 元素上時，.tooltip-text 元素會顯示，並且帶有一個向下的箭頭（由 ::after 偽元素創建）。這種效果常用於顯示更多訊息或提示。

上面黑色對話框為 hover 時的效果

5. 優化圖片加載失敗的顯示效果

當圖片加載失敗時，瀏覽器會顯示一個破裂的圖片圖標和 alt 文本，這樣會讓頁面看起來不太美觀。我們可以通過使用偽元素 ::before 和 ::after 來美化這種情況，讓頁面在圖片加載失敗時看起來更整潔。

方法大致是

  1. 設置父容器：
    • 使用 position: relative; 設置父容器，並設置固定的寬度和高度。
  2. 設置圖片：
    • 確保圖片寬度和高度填滿父容器，並設置為塊級元素。
  3. **使用偽元素 ::before 和 ::after**：
    • ::before：用來顯示 alt 屬性中的文本。通過絕對定位，使文本垂直和水平居中顯示在圖片的中間。
    • ::after：用來顯示一個破裂圖片的圖標。通過絕對定位，使圖標垂直和水平居中顯示在圖片的中間。
  4. 處理無效的 src 屬性：
    • 使用 CSS 選擇器 :not([src])、[src=""] 等處理當圖片 src 無效或空白的情況。
    • 當圖片 URL 無效時，顯示偽元素，隱藏原始圖片。

偽元素的優缺點

優點

  1. 不改變 HTML 結構：使用 ::before 和 ::after 可以在不改變 HTML 結構的情況下增加視覺效果，保持代碼整潔。
  2. 靈活性：可以用來添加圖標、裝飾線條、背景等，極大地增強了設計的靈活性。
  3. 動畫效果：配合 CSS 動畫，可以創建豐富的互動效果。

缺點

  1. 兼容性問題：雖然大多數現代瀏覽器都支持 ::before 和 ::after，但在一些舊瀏覽器中可能會有兼容性問題。
  2. 樣式限制：偽元素的內容受限於 CSS 的 content 屬性，不能包含複雜的 HTML 結構。
  3. 維護困難：大量使用偽元素可能會使樣式變得複雜，增加維護難度。
  4. 與 JavaScript 的交互：偽元素無法直接被 JavaScript 操控。要改變偽元素的樣式，必須改變其對應的 CSS 樣式。這意味著如果你需要偽元素與 JavaScript 互動，必須通過改變其父元素的樣式來間接實現。

CSS 偽元素 ::before 和 ::after 是好用又非常容易上手的工具，可以用來增強網頁的視覺效果，而不需要改變 HTML 結構。適當使用可以讓網頁更豐富，你也來試試吧～