伪元素: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>