1.什么是伪元素
伪元素可以理解成“虚假的元素”，它们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。
虽然在结构上是“虚假”的元素，但在表现上和“普通”元素没有什么区别，能够为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等。
2.伪元素的种类
| 伪元素种类 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式 |
| :first-line | 向文本的首行添加特殊样式 |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
:before 和 :after 较为常用，能够辅助实现各类效果和功能。
伪元素使用一个或两个冒号都可以。
3.after 与 before 伪元素
在伪元素中添加内容可以使用content属性。需要注意，如果不为伪元素设置content属性，伪元素并不会显示。如果希望伪元素能够显示，又不希望伪元素当中存在任何可视文本内容，可以将content 设置为”\200B”(零宽度的空格)
默认情况下，after 与 before 伪元素以行元素的特性进行渲染。
如果希望伪元素能够以块元素显示，为其设置display:block;即可。
利用伪元素可以实现背景图等功能。
4.伪类
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
