::before 和 ::after 伪元素选择器

最新推荐文章于 2024-04-28 17:46:18 发布

GiGiGiGiGi~~~

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量224

点赞数 1

分类专栏： web前端学习记录文章标签： css html

本文链接：https://blog.csdn.net/weixin_58697368/article/details/134273250

版权

web前端学习记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一. 先了解什么是伪元素选择器

伪元素不是真正的页面元素，在 HTML 中没有对应的元素。
伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，实际并不存在于 HTML 文档中。
伪元素在 HTML 中无法审查，但是伪元素的用法和真正的页面元素一样，可以用来对CSS设置样式，用于将特殊的效果添加到某些选择器。

二. 伪元素选择器和伪类的区别

伪类的效果可以通过添加一个实际的类来达到，称之为伪类。用一个冒号表示（:）；
伪元素的效果则需要通过添加一个实际的元素才能达到，称之为 伪元素。用两个冒号表示（::）。

三. ::before 和 ::after 伪元素选择器

1. ::before ：在某些元素之前插入某些内容。

2. ::after ：在某些元素之后插入某些内容。

3. ::before 和 ::after 必须搭配 content 属性才能使用。最后产生 before 或 after 为对象，在块内部 所有子元素的前面或后面插入内容。

4. content 属性有：

（1）文本或其他文字；

（2）图片，但图片是原始尺寸，不好控制大小；

    <style>
        div{
            width: 420px;
            height: 100px;
            border: 1px solid black;
        }
        div::before{
            content: url(img/20-Loading.jpg) '之前插入';
            background-color: grey;
        }
        div::after{
            content: '之后插入' url(img/20-Loading.jpg);
            background-color: rgb(167, 138, 138);
        }
    </style>
</head>
<body>
    <div><span>所有子元素</span></div>
</body>

在块内部所有子元素的前面或后面插入内容。

图片是原始尺寸，不好控制大小。

(3) 空对象： content:" ",产生一个空对象，特别适合设置一个 position:absolute 的对象，然后就可以结合背景或者定位实现丰富的效果。

5. 定义一个盒子：插入对象默认是行内元素，通过 display: block; 转换为块级元素，可以对插入的内容定义 width、height 和其他属性。

    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        div::before{
            content: 'box1';
            display: block;/*============= 行内元素变为块级元素 ==============*/
            width: 100px;
            height: 100px;
            background-color: grey;
        }
        div::after{
            content: 'box2';
            display: ;/*============= 没有变换为块级元素 ==============*/
            width: 100px;
            height: 100px;
            background-color: rgb(167, 138, 138);
        }
    </style>
</head>
<body>
    <div>box</div>
</body>

box1 可以设置 width、height，而 box2 设置无效。

所以要使用 display：block;

新手创作，有错误请指正！！！！

点赞+++++关注！！！

GiGiGiGiGi~~~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
::before 和 ::after 伪元素选择器

伪元素不是真正的页面元素，在 HTML 中没有对应的元素。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，实际并不存在于 HTML 文档中。伪元素在 HTML 中无法审查，但是伪元素的用法和真正的页面元素一样，可以用来对CSS设置样式，用于将特殊的效果添加到某些选择器。
复制链接

扫一扫