写过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标签，是否感觉洁净简洁。这就是伪元素作用所在。能够在节俭标签的状况下让内容更加丰盛，真正的加量不加价