Css 简明教程

CSS - Pseudo Elements

CSS pseudo-elements 用于设计元素中指定的部分的样式。在浏览网页时，你可能已经注意到某些段落的首字母比其余字母更大。使用 CSS 中的伪元素可对元素的特定部分进行此类设计。在本教程中，我们将解释全部的伪元素及其功能。

CSS pseudo-elements are used to style specified parts of an element. While browsing a webpage, you might have noticed that the first letter of some paragraphs is larger than rest of letters. This type of styling for a specific part of elements is done using pseudo-elements in CSS. In this tutorial we will explain all the pseudo-elements and their functioning.

What is Pseudo-Element?

CSS 中的伪元素用于设计不是 DOM（文档对象模型）的一部分，且不存在于 HTML 标记中的元素的特定部分。例如，段落的首字母、输入元素中的占位符文本或文档中选中的部分。

A pseudo-element in CSS, is used to style a specific part of an element that are not the part of the DOM (Document Object Model) and do not exist in the HTML markup. For Example first letter of a paragraph, placeholder text inside input element or selected part in a document.

Pseudo-elements are denoted by a double colon (::) notation.
Only one pseudo-element can be used in a selector.
A pseudo-element in a selector must appear after all the other components. For example, p::last-line:hover is invalid.
Pseudo-elements can be used to add decorative styles, create special effects, and modify the appearance of certain parts of an element, that has a state already applied to it. For example, p:hover::last-line is a valid statement and selects the last line of the paragraph when the paragraph is hovered

Syntax

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

四种原始伪元素，即 ::before、::after、::first-line 和 ::first-letter，受浏览器支持单冒号语法。

The single colon syntax is supported by the browsers for the four original pseudo-elements, i.e., ::before, ::after, ::first-line, and ::first-letter.

Content Insertion Pseudo-Elements

在 CSS 中，伪元素 * ::before* 和 * ::after* 用于在任何元素之前和之后插入文本内容或图像。

In CSS, pseudo-elements ::before and ::after are used to insert text contents or images before and after any element.

Example

此示例展示了如何使用 CSS 在段落的开头和结尾处插入文本和图像。

This example shows how to insert text and images at start and end of a paragraph using 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 Backdrop Pseudo-Element

在 CSS 中， * ::backdrop* 伪元素用于设计处于模态上下文中的元素的背景，例如当显示 * <dialog>* 元素时的背景。

In CSS the ::backdrop pseudo-element is used to style the backdrop of an element that is in a modal context, such as the backdrop behind a <dialog> element when it is shown.

Example

下面的示例演示了使用 ::backdrop 伪元素。

Following example demonstrates use of ::backdrop pseudo-element.

<!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 Cue Pseudo-Element

在 CSS 中，伪元素 * ::cue* 与 Web 视频文本轨道配合使用，用于为 * <video>* 和 * <audio>* 等媒体元素设置文本轨道特定部分（如字幕或标题）的样式。

In CSS, the pseudo-element ::cue is used with Web Video Text Tracks to style specific parts of text tracks, such as subtitles or captions, for media elements like <video> and <audio>.

Example

下面的示例演示了 ::cue 伪元素的使用：

Following example demonstrates use of ::cue pseudo-element:

<!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 First-Letter Pseudo-Element

在 CSS 中， * ::first-letter* 伪元素用于定位 * div* 、 * paragraph* 、 * span* 等任何元素文本内容的首字母

In CSS, the ::first-letter pseudo-element is used to target the first letter of text content of any elements like div, paragraph, span etc

Example

下面的示例演示了 ::first-letter 伪元素的使用：

Following example demonstrates use of ::first-letter pseudo-element:

<!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 First-Line Pseudo-Element

在 CSS 中， * ::first-line* 伪元素用于定位任何元素（如 * div* 、 * paragraph* 、 * span* 等）的文本内容的第一行

In CSS, the ::first-line pseudo-element is used to target the first line of text content of any elements like div, paragraph, span etc

Example

以下示例演示了 ::first-line 伪元素的使用：

Following example demonstrates use of ::first-line pseudo-element:

<!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 File-Selector-Button Pseudo-Element

在 CSS 中， * ::file-selector-button* 伪元素用于在现代浏览器中设计文件 * input* 元素（<input type="file">）的按钮。

In CSS, the ::file-selector-button pseudo-element is used to style the button of a file input element (<input type="file">) in modern browsers.

Example

以下示例演示了 ::file-selector-button 伪元素的使用：

Following example demonstrates use of ::file-selector-button pseudo-element:

<!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 Marker Pseudo-Element

在 CSS 中， * ::marker* 伪元素用于设计 * ordered list* 和 * unordered list* 的标记。

In CSS, the ::marker pseudo-element is used to style the marker of ordered list and unordered list.

Example

以下示例演示了 ::marker 伪元素的使用：

Following example demonstrates use of ::marker pseudo-element:

<!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 Placeholder Pseudo-Element

在 CSS 中， * ::placeholder* 伪元素用于设计文本 * input* 元素（<input type="text">）内的默认文本。

In CSS, the ::placeholder pseudo-element is used to style the default text inside text input element (<input type="text">).

Example

以下示例演示了 ::placeholder 伪元素的使用：

Following example demonstrates use of ::placeholder pseudo-element:

<!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 Selection Pseudo-Element

在 CSS 中， * ::selection* 伪元素用于设计任何元素（如 * div* 、 * paragraph* 、 * span* 等）内用户选择的文本

In CSS, the ::selection pseudo-element is used to style the user selected text inside any elements like div, paragraph, span etc

Example

以下示例演示了 ::selection 伪元素的使用：

Following example demonstrates use of ::selection pseudo-element:

<!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>

Multiple Pseudo-elements

我们还可以在一个选择器中添加多个伪元素，查看示例。

We can also add multiple pseudo elements to a selector, Check out the example.

Example

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

Following example demonstrates usage of multiple pseudo-elements (::first-line and ::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>