伪元素是一个很好用的东西,它能够帮助我们简化html结构,不过很多人不太会使用它,也不知道什么时候该使用它,下面我就来说说关于伪元素的使用场景和使用方法。
什么是伪元素呢?其实它就是一个标签的子元素,不过这个子元素在html的代码中并不能见到,只能在css样式中对其进行配置。
如以下html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这种布局结构,展示出来最终的dom结构如下:
一旦我在样式中配置了before或者after,如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
div::before{
content: "";
}
</style>
</head>
<body>
<div></div>
</body>
</html>
则界面中最终呈现的dom结构将会变为:
在div下多了一个子元素before,after也是同理。所以before和after就是某个标签的子元素,在html代码中并没有这个标签,是通过样式进行配置的。
伪元素的使用方法:
关于伪元素有一定的语法要求,如下:
1、content属性必须得有
既然伪元素并不存在html标签中,不过它好歹是一个元素,既然是元素,在html标签中又不存在,那这个标签中的内容怎么配置呢?好比<div>123</div>中的123如何给伪元素配置呢?这时候就需要使用到content属性了,content属性相当于是标签中的内容。伪元素,content属性必须得有,无论你有没有内容。哪怕是一个空字符串也得有这个属性。
2、它是一个行内元素
既然是一个行内元素,如果要配置宽高,则需要将它变为块级元素
3、无法通过js代码获取到这个dom节点,所以它”伪”
伪元素的使用场景:
1、只能看,不能摸的元素
红色框中的指示标识
绿色框中的小竖线
绿色框中的两个圆坑
2、清除浮动
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0px;
clear: both;
visibility: hidden;
}
3、字体图标
伪元素的使用限制:
1、双标签才有伪元素,单标签是没有伪元素的
2、Js代码无法获取伪元素