CSS渡一教程学习笔记(十二)--伪元素

最新推荐文章于 2022-11-03 17:13:16 发布

zhou_shadow

最新推荐文章于 2022-11-03 17:13:16 发布

阅读量260

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhou_shadow/article/details/91990982

版权

伪元素存在于任意一个HTML标签里面。可以通过CSS显示展示出来。任意一个标签元素在创建时都带有两个伪元素分别为before和after,伪元素可以和正常元素一起使用,但是伪元素没有正常的元素结构。伪元素结构上存在，但没有写在HTML代码里面，可以被css正常操作，但是没有HTML标签结构，也即是可以当成HTML元素，但是没有元素结构，也就是所谓“伪元素”。其中伪类都是行级(内联)元素。类似于span等display:inline等元素，可以把他当成一个普通行级元素使用，只是只能用样式先选中，再进行操作。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        span::before{
    
            /*伪元素必定存在的一个属性，content:""必须存在，即使什么都不添加*/
            content:"伪元素before";
            background-color:yellow;
            /*将行级元素转为内联块元素*/
            display:inline-block;
            width:200px;
            height:200px;
        }
        span::after{
    
            content:"伪元素after"


        }
    </style>
</head>
<body>
<span>
<!--逻辑上存在before,如果不操作，则不可见，如果使用CSS操作出来，则可以添加修改一些css-->
    正常元素
<!--逻辑上存在after-->
</span>
</body>
</html>

结果：
在这里插入图片描述

利用伪元素来解决浮动模型-父级包住浮动元素的问题

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *

最低0.47元/天解锁文章

zhou_shadow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS渡一教程学习笔记(十二)--伪元素

伪元素存在于任意一个HTML标签里面。可以通过CSS显示展示出来。任意一个标签元素在创建时都带有两个伪元素分别为before和after,伪元素可以和正常元素一起使用,但是伪元素没有正常的元素结构。伪元素结构上存在，但没有写在HTML代码里面，可以被css正常操作，但是没有HTML标签结构，也即是可以当成HTML元素，但是没有元素结构，也就是所谓“伪元素”。其中伪类都是行级(内联)元素。类...
复制链接

扫一扫