before和after伪元素

    伪元素: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图片加载成功时显示正常的图片，加载失败时显示图片破裂效果的样式

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！