::after 偽元素 (Pseudo‐element) - daniel-qa/Vue GitHub Wiki

::after 偽元素 (Pseudo-element)

使用 ::after 的主要原因就是 「解耦」：將結構 (HTML) 和樣式 (CSS) 徹底分開。

傳統做法：為了顯示一個圖標，你必須在 HTML 中放入一個 < i> 或 < span> 標籤。

::after 做法：你的 HTML 只需要一個 < button> 或 < a>，所有圖標或裝飾性的東西都交由 CSS 處理。

這樣做能讓你的程式碼更容易維護，因為你只需要在 CSS 檔案中調整樣式，而不用擔心改變 HTML 結構。這也是現代網頁開發中非常普遍的設計模式。

  • 範例：有箭頭的連結

這個範例展示如何用 ::after 在連結文字後面「畫」一個小箭頭，而不是使用圖片。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>::after 偽元素範例</title>
    <style>
        .learn-more-link {
            /* 基礎樣式 */
            color: #007bff;
            text-decoration: none; /* 移除預設底線 */
            font-weight: bold;
        }

        /* 使用 ::after 畫出箭頭 */
        .learn-more-link::after {
            content: ""; /* 必須有 content 屬性，即使是空字串 */
            display: inline-block; /* 讓它可以設定寬高 */
            width: 8px; /* 箭頭寬 */
            height: 8px; /* 箭頭高 */
            border-top: 2px solid #007bff; /* 上邊框 */
            border-right: 2px solid #007bff; /* 右邊框 */
            transform: rotate(45deg); /* 旋轉 45 度變成箭頭 */
            margin-left: 5px; /* 與文字的間距 */
        }
    </style>
</head>
<body>

    <a href="#" class="learn-more-link">
        了解更多
    </a>

</body>
</html>

知識點：::after 偽元素

這個範例的核心是這段 CSS：.learn-more-link::after。

content: ""

用途：這是使用偽元素必備的屬性。content 用來指定偽元素的內容。即使內容是空的，這個屬性也一定要寫，否則偽元素不會被渲染出來。

display: inline-block

用途：將這個偽元素變成一個行內區塊元素。這樣它才能與文字並排顯示，同時又可以設定寬度、高度和邊框等屬性。

width, height, border-top, border-right

用途：這些屬性用來「畫」出箭頭的形狀。透過只設定上邊框和右邊框，我們得到一個 L 形。

transform: rotate(45deg)

用途：將這個 L 形旋轉 45 度。旋轉後，它就會看起來像一個指向右邊的箭頭（>）。

margin-left

用途：在箭頭和「了解更多」文字之間增加一些間隔，讓排版看起來更舒服。

透過 ::after，我們可以在不改變 HTML 結構的前提下，為元素新增額外的視覺效果，非常靈活。

⚠️ **GitHub.com Fallback** ⚠️