css3-伪元素选择器

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

零OO

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

阅读量138

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/119889332

版权

前端专栏收录该内容

220 篇文章 8 订阅

订阅专栏

伪元素选择器使用方法

元素名::before{}
元素名::after{}

css2的是：
元素名:before{}
元素名:after{}

推荐使用两个冒号：：，写一个冒号的话也可以，浏览器会转换成两个冒号的

使用使用伪元素选择器可以简化HTML代码结构，减少HTML标签的添加，用css样式的方式添加页面内容

可以在页面上看到展示内容，但是网页HTML代码中不会有改内容的html标签

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器before,after</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid yellow;
            background-color: skyblue;
        }
        /* 权重为1+1=2 */
        div::before {
            content: '今天';
        }
        
        div::after {
            content: '真真好';
        }
    </style>
</head>

<body>
    <div>天气</div>
</body>

</html>

页面效果：

页面中的一段字，在网页html代码中只有‘天气’，其前后的文字是通过- - -伪元素选择器before和after，书写css样式添加的

注意：

before和after中一定要写content属性
创建的元素属于行内元素
创建的元素在文档树中找不到，所以称为伪元素
伪元素选择器和标签选择器权重一样，都为1

伪元素清除浮动

伪元素发是额外标签法的升级优化版，插入的元素必须是块级元素

方法一：

在父元素里面，after伪元素添加一个子元素，内容为空，设为块级元素，高度0，清除两边浮动，设置为隐藏

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

方法二：

父元素里面添加最前和最后的子元素，内容为空，设为table是让它们变成块级元素，且处于同一行，清除两边浮动

.clearfix:before,
.clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

零OO

关注

0
点赞
踩
1

收藏

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

伪元素选择器使用方法元素名::before{}元素名::after{}css2的是：元素名:before{}元素名:after{}推荐使用两个冒号：：，写一个冒号的话也可以，浏览器会转换成两个冒号的使用使用伪元素选择器可以简化HTML代码结构，减少HTML标签的添加，用css样式的方式添加页面内容可以在页面上看到展示内容，但是网页HTML代码中不会有改内容的html标签代码示例：<head> <meta charset="UTF-8"> <m
复制链接

扫一扫