伪元素，这不是有手就行

最新推荐文章于 2024-08-20 19:02:16 发布

浪漫主义码农

最新推荐文章于 2024-08-20 19:02:16 发布

阅读量554

点赞数 1

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/mq_sir/article/details/121160011

版权

CSS 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

伪元素

在这里插入图片描述

你以为这个火箭是一张图片吗？它只是四个div，其余都是伪元素实现的效果。

伪元素是什么呢?

字面上就可以了解,伪元素–伪装的元素,就是页面不存在的元素.,用于创建一些不在DOM树中的元素，并为其添加样式。

那么我们就要区分伪元素和伪类的区别?

有没有创建一个文档树之外的元素。

我们在css3规范中要求使用双冒号（::）表示伪元素，一个冒号（:）表示伪元素,以此来区分伪类和伪元素

伪元素的使用

伪元素只有以下这些:主要应用于 设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容

选择器	例子	例子描述
::after	p::after	在每个 p 元素之后插入内容。
::before	p::before	在每个 p 元素之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个 p 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

::before

在元素之前插入内容 一定要使用content属性，不然没有效果，值为字符串，可以是文字可以是路径。

例子：在p标签前面添加一个图标

<body>
    <div class="main">
        <p>浪漫主义码农</p>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    p::before{
        content: url('./tx.jpg');
        margin-right: 10px;
    }
</style>

效果：

在这里插入图片描述

::after

在元素之后插入内容
同样是上面的代码，我们把伪元素改为p::after，照片就显示在文字之后了。
一定要使用content属性，不然没有效果，值为字符串，可以是文字可以是路径。

伪元素当然也支持定位，这样我们就可以实现伪元素出现在父元素的任意位置了。

效果：

在这里插入图片描述

::first-letter

选择每个元素的首字母或文字，::first-letter伪元素只适用于块级元素。

<body>
    <div class="main">
        <h2>浪漫主义码农</h2>
        <p>今年100岁</p>
        <h1>Good morning</h1>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    .main ::first-letter{
        background: rgb(30, 160, 199);
    }
</style>

效果：

在这里插入图片描述

::first-line

选择每个元素的首行.::first-line 伪元素只能应用于块级元素.

例子：

<body>
    <div class="main">
        <h1>我来自中国，我喜欢打篮球。</h1>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    .main ::first-letter{
        background: red;
        font-size: 2cm;
    }
    .main ::first-line{
        background-color: rgb(39, 214, 245);
    }
</style>

效果：

在这里插入图片描述

::selection

选择用户选择的元素部分

例子：

<body>
    <div class="main">
        <p>本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 现在，解决一天掉多少根头发的问题，是非常非常重要的
            了解清楚一天掉多少根头发到底是一种怎么样的存在，是解决一切问题的关键</p>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    .main ::selection{
        background: rgb(0, 238, 255);
        color: sandybrown;
    }
</style>