CSS伪元素选择器

super码力

已于 2022-06-15 15:02:34 修改

阅读量5.5k

点赞数 21

分类专栏： # HTML和CSS学习笔记文章标签： css3 前端 css

于 2022-06-15 08:00:00 首次发布

本文链接：https://blog.csdn.net/m0_61843874/article/details/125279592

版权

HTML和CSS学习笔记专栏收录该内容

18 篇文章 10 订阅

订阅专栏

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

//本篇文章都使用这个结构代码来做演示
//lorem加上Tab键快速生成一段测试英文
<body>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique consectetur quo recusandae eveniet magnam unde praesentium? Soluta perspiciatis similique quae quos modi consequatur, ipsam atque libero cum mollitia nam possimus!</p>
</body>

🌵::first-letter

::first-letter表示第一个字母，例如：p::first-letter{}

代码演示📝

    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
    </style>

效果如图🎨

🌵::first-line

::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}

代码演示📝

    <style>
        p::first-line{
            color: blue;
        }
    </style>

效果如图🎨

🌵::selection

::selection表示选中的内容

代码演示📝

    <style>
        p::selection{
            color: aqua;
        }
    </style>

效果如图🎨

🌵::before和::after

::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用

代码演示📝

    <style>
        p::after{
            content: "hahaha";
            color: red;
        }
        p::before{
            content: "hehehe";
            color: coral;
        }
    </style>

效果如图🎨