伪元素是一个很好用的东西，它能够帮助我们简化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代码无法获取伪元素
1794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
