写过css样式的小伙伴应该都见过::before跟::after这两个css的伪元素，主要的作用是在元素的前后额外新增内容。如下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>css伪元素（::before和::after）</title>
<style type="text/css">
.content::before{
content: '前面';
color: red;
}
.content::after{
content: '后面';
color: red;
}
</style>
</head>
<body>
<div class="content">我是中间</div>
</body>
</html>
可以看到我是中间的前后各自都新增了内容（前面跟后面）。看似很普通很鸡肋的功能对吧，直接写成前面我是中间后面一整段不就完事了，何必花里胡哨的。如果是按照上面的例子来使用伪元素的话，确实会显得很低级。下面使用另外一个例子来证明伪元素的强大之处。
假设要在div标签的前后插入图片的话，没使用过伪元素的小伙伴可能会直接通过img标签来实现，这样确实也可以。但有个明显的问题就是html结构会额外多出这些img，随着需求的变更，这些img标签也越来越多，导致代码可读性差。有了伪元素，就可以在不创建新元素标签的情况下，来新增内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>css伪元素（::before和::after）</title>
<style type="text/css">
.content::before{
content: "";
display: inline-block;
width: 100px;
height: 100px;
background: url(1.jpg) no-repeat;
background-size: 100px 100px;
}
.content::after{
content: "";
display: inline-block;
width: 100px;
height: 100px;
background: url(2.jpg) no-repeat;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div class="content">我是中间</div>
</body>
</html>
可以看到，div标签前后各多出了图片，而代码中却只有一个div标签，是否觉得干净简洁。这就是伪元素作用所在。可以在节省标签的情况下让内容更加丰富，真正的加量不加价
网友评论