伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
我们看到有几个伪元素的使用例子：
用于文本的
:first-line 伪元素
可以通过这个属性设置文本第一行的特殊效果，比如一段文字的第一行为红色，其他为黑色。
如果不通过这个方式来实现，就比较麻烦。因为屏幕适配的原因，你可能不能确定哪些文字属于第一行
:first-letter 伪元素
和first-line 相似，这个只是设置第一个字符的特殊效果。比如第一个字的字体比别的大
如果不通过这个方式实现，那么就可能还要处理对齐，这种实现方式更方便
其他
:before 和 :after
这个看效果是向指定元素前后追加内容，比如：
<html>
<body>
<text class="tx">演示伪元素</text>
</body>
<style>
.tx{
background-color:green;
color:red
}
.tx:before{
content:'测试';
background-color:yellow;
}
.tx:after{
content:'结尾';
background-color:blue;
color:white
}
</style>
</html>
它的效果如下：
很明显，是向tx元素前后追加了内容
官方的例子，通过设置content属性，追加了图片：
但是这种实现效果，为什么不使用两个元素来做呢？为什么要使用伪元素设置content呢。也只是为了不处理对齐这样的吗？
优势参考
提到有一点，js是无法控制伪元素的
伪元素也不利于调试
一个个人觉得比较有说服力的参考3
用于元素的前后修饰
也就是说，当元素前后有一些比较简单的修饰的时候，我们可以使用伪元素使得我们的代码更简洁
用于元素的状态切换效果
状态切换效果应该是需要配合伪类实现的
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
