详解CSS中的伪元素

Code成立2024-10-03 20:45

4.3 伪元素

可以把样式应用到文档树中根本不存在的元素上。

::first-line 文本中的第一行

::first-letter 文本中的第一个字母

::after 元素之后添加

::before 元素之前

代码：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p::first-line {
            background-color: red;
        }

        p::first-letter {
            color: blue;
            font-weight: 600;
        }

        h1::before {
            content: "我是h1前面的添加的内容";
            color: chocolate;
        }

        p::after {
            content: "我是P后面的内容";
            color: brown;
        }
    </style>
</head>
<body>
    <h1>|WWF's Mission Statement</h1>
    <p>To stop the degradation of the
        planet's natural environment
        and to build a future in which
        humans live in harmony with nature,
        by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is
        sustainable, and promoting the reduction of pollution and wasteful consumption.|</p>
</body>
</html>

小结：UI元素状态，:selection冷门生僻，不学习。