before和after伪元素

最新推荐文章于 2021-07-31 18:02:00 发布

无名氏*

最新推荐文章于 2021-07-31 18:02:00 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_44848423/article/details/113955123

版权

伪元素:CSS 伪元素用于向某些选择器设置特殊效果。
伪元素不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

1、伪元素不是页面元素，自然不会被添加到DOM中去。所以js无法操作它。

2、它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter 代表第一个字母；因此当伪元素被点击的时候触发的是主元素的 click 事件

伪元素有很多，这里只介绍两种常用的:::after和::before。

这个两个伪元素在真正页面元素内部之前和之后添加新内容（对伪元素设置定位后可以被置于任何位置）。

伪元素::before和::after添加的内容默认是inline元素。
使用这两个伪元素一定要添加content属性，不然浏览器不会显示该伪元素。

content属性取值

字符串
attr(attr_name) 伪元素的内容跟主元素的某个属性值进行关联,这样写可以通过js改变其内容
url()
counter(), 调用计数器 可以不使用列表元素实现序号问题

用法:

清除浮动

.clearfix::before,
.clearfix::after {
	content:'';
	display: block;
	clear: both;
}

利用attr()来实现某些动态功能
img图片加载成功时显示正常的图片，加载失败时显示图片破裂效果的样式

<!DOCTYPE html>
<html lang="en">

<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>Document</title>

    <style>
        img {
            min-width: 200px;
            min-height: 200px;
            position: relative;
        }
        
        img::before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: rgb(230, 230, 230);
            border: 2px dotted rgb(200, 200, 200);
            border-radius: 5px;
        }
        
        img::after {
            display: block;
            content: " Broken Image of " attr(alt);
            font-size: 16px;
            font-style: normal;
            font-family: FontAwesome;
            color: rgb(100, 100, 100);
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            text-align: center;
        }
    </style>
</head>

<body>

    <img src="../img/1.jpg" alt="加载图" data-src="../img/loading.gif">
</body>

</html>

无名氏*

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
before和after伪元素

    伪元素:CSS 伪元素用于向某些选择器设置特殊效果。    伪元素不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。1、伪元素不是页面元素，自然不会被添加到DOM中去。所以js无法操作它。2、它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，
复制链接

扫一扫