CSS - 偽元素

CSS **偽元素**用於為元素的指定部分設定樣式。在瀏覽網頁時，您可能注意到某些段落的首字母比其餘字母更大。這種針對元素特定部分的樣式設定是使用 CSS 中的偽元素完成的。在本教程中，我們將解釋所有偽元素及其功能。

什麼是偽元素？

CSS 中的偽元素用於為元素的特定部分設定樣式，這些部分不是 DOM（文件物件模型）的一部分，並且不存在於 HTML 標記中。例如，段落的第一字母，輸入元素內的佔位符文字或文件中選定的部分。

偽元素由雙冒號 (::) 表示法表示。
選擇器中只能使用一個偽元素。
選擇器中的偽元素必須出現在所有其他元件之後。例如，**p::last-line:hover** 是無效的。
偽元素可用於新增裝飾性樣式，建立特殊效果以及修改已應用狀態的元素某些部分的外觀。例如，**p:hover::last-line** 是一個有效的語句，並在將滑鼠懸停在段落上時選擇段落的最後一行。

語法

selector::pseudo-element {
   property: value;
}

瀏覽器支援四個原始偽元素的單冒號語法，即 ::before、::after、::first-line 和 ::first-letter。

內容插入偽元素

在 CSS 中，偽元素 **::before** 和 **::after** 用於在任何元素之前和之後插入文字內容或影像。

示例

此示例演示如何使用 CSS 在段落的開頭和結尾插入文字和影像。

<!DOCTYPE html>
<html>

<head>
    <style>
        p:before {
            content: "NOTE:";
            font-weight: bold;
        }
        p:after {
            content: url(/css/images/smiley.png);
        }       
    </style>
</head>

<body>
    <p>
        We inserted intro at start and emoji at end.
    </p>
</body>
</html>

CSS 背景偽元素

在 CSS 中，**::backdrop** 偽元素用於為處於模態上下文中的元素的背景設定樣式，例如，當 **<dialog>** 元素顯示時，其後面的背景。

示例

以下示例演示了 **::backdrop** 偽元素的使用。

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            height: 200px;
        }
        dialog {
            padding: 20px;
            border: 2px solid black;
            border-radius: 10px;
        }
        dialog::backdrop {
            /* Semi-transparent black */
            background-color: rgba(0, 0, 0, 0.5); 
        }
    </style>
</head>

<body>
    <h3> Backdrop Example </h3>

    <dialog id="myDialog">
        <p> This is a dialog with a styled backdrop. </p>
        <button id="closeButton"> Close </button>
    </dialog>

    <button id="openButton">Open Dialog</button>

    <script>
        const dialog = document.getElementById('myDialog');
        const openButton = document.getElementById('openButton');
        const closeButton = document.getElementById('closeButton');

        openButton.addEventListener('click', () => {
            dialog.showModal();
        });

        closeButton.addEventListener('click', () => {
            dialog.close();
        });
    </script>
</body>
</html>

CSS 提示偽元素

在 CSS 中，偽元素 **::cue** 與 Web 影片文字軌道一起使用，為媒體元素（如 **<video>** 和 **<audio>**）的文字軌道的特定部分（如字幕或隱藏式字幕）設定樣式。

示例

以下示例演示了 ::cue 偽元素的使用。

<!DOCTYPE html>
<html>
<head>
<style>
    video {
        width: 100%;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="/css/foo.mp4">
        <track default kind="captions" 
               srclang="en" src="/css/cue-sample.vtt" />
    </video>    
</body>
</html>

CSS 首字母偽元素

在 CSS 中，**::first-letter** 偽元素用於定位任何元素（如 **div**、**段落**、**span** 等）的文字內容的首字母。

示例

以下示例演示了 **::first-letter** 偽元素的使用。

<!DOCTYPE html>
<html>

<head>
    <style>
        p::first-letter { 
            text-transform: uppercase;
            font-size: 2em;
            color: darkred;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        this is a paragraph with first letter in lowercase, 
        we used ::first-letter pseudo-element to capitalize
        first-letter of paragraph with a larger font size 
        and a different color. 
    </p>
</body>

</html>

CSS 首行偽元素

在 CSS 中，**::first-line** 偽元素用於定位任何元素（如 **div**、**段落**、**span** 等）的文字內容的首行。

示例

以下示例演示了 **::first-line** 偽元素的使用。

<!DOCTYPE html>
<html>

<head>
    <style>
        p::first-line { 
            background-color: #f0f0f0;
            color: darkred;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        This is a normal paragraph with no stylings, we used 
        ::first-line pseudo-element to only style first-line of 
        paragraph by adding a background color, font-style and 
        text color
    </p>
</body>

</html>

CSS 檔案選擇器按鈕偽元素

在 CSS 中，**::file-selector-button** 偽元素用於為現代瀏覽器中的檔案 **input** 元素（<input type="file">）的按鈕設定樣式。

示例

以下示例演示了 **::file-selector-button** 偽元素的使用。

<!DOCTYPE html>
<html> 

<head>
    <style>
        body {
            display: block;
            height: 100px;
        }

        input::file-selector-button {
            background-image:url(/css/images/border.png);
            background-size: 200%;
            border: 2px solid black;
            border-radius: 8px;
            font-weight: 600;
            color: rgb(6, 1, 9);
            padding: 15px;
            transition: all 0.25s;
        }
    </style>
</head>

<body>
    <h2> Select a file </h2>
    <input type="file">
</body>

</html>

CSS 標記偽元素

在 CSS 中，**::marker** 偽元素用於為 **有序列表** 和 **無序列表** 的標記設定樣式。

示例

以下示例演示了 **::marker** 偽元素的使用。

<!DOCTYPE html>
<html> 

<head>
    <style>
        ol li::marker {
            color: rgb(11, 38, 241);
            font-weight: bold;
        }
        ul li::marker {
            content: url('/css/images/smiley.png')
        }
    </style>
</head>

<body>
    <h2>Numbered list</h2>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>

    <h2>Bulleted list</h2>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>

</html>

CSS 佔位符偽元素

在 CSS 中，**::placeholder** 偽元素用於為文字 **input** 元素（<input type="text">）內的預設文字設定樣式。

示例

以下示例演示了 **::placeholder** 偽元素的使用。

<!DOCTYPE html>
<html> 
<head>
    <style>
        .form {
            border: 2px solid black;
            background: lightgray;
            padding: 25px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        input{
            padding: 10px;
            background-color: cornsilk;
        }

        input::placeholder { 
            color: grey; 
            font-style: italic;
            font-size: 20px;
        } 
    </style>
</head>

<body>
    <div class="form">
        <h2> Your Details:</h2>

        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="Address">
        <input type="text" placeholder="Phone">
    </div>
</body>

</html>

CSS 選擇偽元素

在 CSS 中，**::selection** 偽元素用於為任何元素（如 **div**、**段落**、**span** 等）內的使用者選擇的文字設定樣式。

示例

以下示例演示了 **::selection** 偽元素的使用。

<!DOCTYPE html>
<html> 

<head>
    <style>
        .highlight::selection { 
            color: yellow;
            background: brown;
        } 
    </style>
</head>

<body>
    <p class="highlight">
        Select Me!!! to see the effect.
    </p>
    <p> No style applied to me. </p>
</body>
</html>

多個偽元素

我們還可以向選擇器新增多個偽元素，請檢視示例。

示例

以下示例演示了多個偽元素（::first-line 和 ::first-letter）的使用。

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line { 
            text-decoration: underline;
        }
        
        p::first-letter { 
            text-transform: uppercase;
            font-size: 2em;
            color: red;
        }
    </style>
</head>
<body>
    <p>
        the first line of this paragraph will be underlined and 
        first letter is uppercase, 2em and red in color, as the
        pseudo-element ::first-line & ::first-letter is applied 
        on p. The other lines are not underlined.
    </p>
</body>
</html>

所有 CSS 偽元素

下表顯示了 CSS 中的所有偽元素

偽元素	描述	示例
::after	新增一個偽元素，它是所選元素的最後一個子元素。	試試看
::backdrop	用於為對話方塊等元素的背景設定樣式。	試試看
::before	新增一個偽元素，它是所選元素的第一個子元素。	試試看
::cue	用於為具有影片文字軌道的媒體中的字幕和提示設定樣式。	試試看
::first-letter	將樣式應用於塊級元素第一行的首字母。	試試看
::first-line	將樣式應用於塊級元素的第一行。	試試看
::file-selector-button	表示型別為“file”的 <input> 的按鈕。	試試看
::marker	選擇列表項的標記框。	試試看
::part()	表示陰影樹中具有匹配 part 屬性的元素。	試試看
::placeholder	表示 <input> 或 <textarea> 元素中的佔位符文字。	試試看
::selection	將樣式應用於文件中選定的部分（透過單擊並拖動滑鼠穿過文字進行選擇）。	試試看
::slotted()	表示已放置到 HTML 模板內部插槽中的元素。	試試看
::grammar-error	用於為瀏覽器內建語法檢查工具識別為語法錯誤的文字設定樣式。	試試看
::spelling-error	用於為瀏覽器內建拼寫檢查工具識別為拼寫錯誤的文字設定樣式。	試試看

列印頁面