文章目录 伪元素用于文本的:first-line 伪元素:first-letter 伪元素 其他:before 和 :after优势参考用于元素的前后修饰用于元素的状态切换效果
伪元素
w3school文档
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属性，追加了图片：
但是这种实现效果，为什么不使用两个元素来做呢？为什么要使用伪元素设vps云服务器置content呢。也只是为了不处理对齐这样的吗？
优势参考参考博文1
提到有一点，js是无法控制伪元素的
伪元素也不利于调试
参考博文2
一个个人觉得比较有说服力的参考3
用于元素的前后修饰也就是说，当元素前后有一些比较简单的修饰的时候，我们可以使用伪元素使得我们的代码更简洁
用于元素的状态切换效果状态切换效果应该是需要配合伪类实现的
