CSS3伪元素选择器

最新推荐文章于 2024-04-16 12:23:43 发布

CLAM-

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量76

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_42306826/article/details/115052722

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

`CSS3`伪元素选择器

伪类元素选择器

选择符	简介
::before	在元素的内部的前面插入内容
::after	在元素的内部后面插入内容

伪类选择器注意事项

before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个元素，但是属于行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1
案例：

<style>
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        
        .div1::before {
            content: '你';
            width: 50px;
            height: 50px;
            background-color: pink;
            display: inline-block;
        }
        
        .div1::after {
            content: '呀！';
            width: 50px;
            height: 50px;
            display: inline-block;
            background-color: pink;
        }
    </style>

<body>
    <div class="div1">
        好
    </div>
</body>

CLAM-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3伪元素选择器

CSS3伪元素选择器伪类元素选择器选择符简介::before在元素的内部的前面插入内容::after在元素的内部后面插入内容伪类选择器注意事项before 和 after 必须有 content 属性before 在内容前面，after 在内容后面before 和 after 创建的是一个元素，但是属于行内元素创建出来的元素在 Dom 中查找不到，所以称为伪元素伪元素和标签选择器一样，权重为 1案例：<style>
复制链接

扫一扫