详解CSS中的伪元素

阿立聊全栈

于 2024-10-02 10:51:57 发布

阅读量112

点赞数 1

分类专栏： CSS3专业网页开发文章标签：伪元素

本文链接：https://blog.csdn.net/qq_36324341/article/details/142679305

版权

CSS3专业网页开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

4.3 伪元素

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

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

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

::after 元素之后添加

::before 元素之前

代码：

<!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冷门生僻，不学习。

关注博主即可阅读全文