本文介绍了CSS3中的伪元素选择器，包括::before和::after的用法，用于在元素前后插入内容。通过示例展示了如何利用content属性生成文本和设置选择文本的样式。
书接上文，上回书咱们讲到了一个特殊的选择器，叫做伪类选择器。这类选择器主要是用来设置 HTML 元素在某种状态下的样式。不是太好掌握，需要仔细地理解、消化，再加上自己的总结才行。
接下来，咱们来说一说最后一种选择器，也是一种用法比较特殊的选择器，叫做伪元素选择器。
什么是伪元素选择器
之所以叫做伪元素选择器，我觉得还是挺直观的。说明这种选择器可以模拟 HTML 元素的效果，但又不是真正的 HTML 元素呗。那是不是这样呢？咱们还得慢慢来看。
关于伪元素选择器有个挺有意思的事儿，就是在 CSS3 版本之前，伪元素选择器的语法结构和伪类选择器的语法结构是一致的。也就是说，伪元素选择器也是在普通选择器的后面添加对应关键字来完成特定的功能。比如像这种用法，看着和伪类选择器没什么区别，但是它是伪元素选择器：
p:first-line {
color: red;
font-size: 12px;
}
而到了 CSS3 版本之后，伪元素选择器的语法结构就把一个冒号（:）改成了两个冒号（::）。也就是说，上面这个示例在 CSS3 版本之后应该这样来写才对：
p::first-line {
color: red;
font-size: 12px;
}
之所以这样做，估计应该只是为了和伪类选择器区分开吧。反正这个事儿我也没去认真地查阅过具体的原因。
::before 和 ::after 伪元素选择器
在伪元素选择器里面，::before 和 ::after 伪元素选择器应该是咱们使用的频率最高的了。::before 伪元素选择器的作用就是为定位到的 HTML 元素创建第一个子元素，::after 伪元素选择器的作用就是为定位到的 HTML 元素创建最后一个子元素。
是的！你没看错，这两个伪元素选择器的作用就是为某个 HTML 元素创建第一个子元素和最后一个子元素的。这时候你可能会有个疑问，就是我在写 HTML 元素时，某个 HTML 元素很可能已经有了第一个子元素和最后一个子元素了，那再用这两个伪元素选择器之后会怎么样？答案是这两个伪元素选择器依旧会创建一个新的第一个子元素和最后一个子元素，而原来的第一个子元素和最后一个子元素就不再是了。
不信的话，咱们来看个示例相信你就明白了：
<!DOCTYPE html>
<html lang="en">
<head>
最低0.47元/天 解锁文章
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
