概览
在前端开发中，使用伪元素可以使我们的文档结构更加简洁。::before 和::after 匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的 content 属性，默认是内联元素。
伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于 id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。
伪类
根据 W3C，CSS 伪类用于向某些选择器添加特殊的效果。
伪类用于选择 DOM 树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的 DOM 树中的元素，比如:first-child，:first-of-type，:target。
伪类统一以:（单冒号）开头。
伪类一览表
| 属性 | 描述 | CSS 版本 |
| ::first-letter | 选择指定元素的第一个单词 | 1 |
| ::first-line | 选择指定元素的第一行 | 1 |
| ::after | 在指定元素的内容前面插入内容 | 2 |
| ::before | 在指定元素的内容后面插入内容 | 2 |
| ::selection | 选择指定元素中被用户选中的内容 | 3 |
伪元素
伪元素为 DOM 树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。
比如::before 表示选择元素内容的之前内容，也就是""（默认空）；::selection 表示选择元素被选中的内容。
伪元素标准写法以::（双冒号）开头。
有时候发现单冒号写法也能正常显示，因为 CSS2 是使用单冒号的，CSS3 出来了为了区分伪类和伪元素所以才用双冒号表示，所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
伪元素一览表
| 属性 | 描述 | CSS 版本 |
| :active | 选择正在被激活的元素 | 1 |
| :hover | 选择被鼠标悬浮着元素 | 1 |
| :link | 选择未被访问的元素 | 1 |
| :visited | 选择已被访问的元素 | 1 |
| :first-child | 选择满足是其父元素的第一个子元素的元素 | 2 |
| :lang | 选择带有指定 lang 属性的元素 | 2 |
| :focus | 选择拥有键盘输入焦点的元素 | 2 |
| :enable | 选择每个已启动的元素 | 3 |
| :disable | 选择每个已禁止的元素 | 3 |
| :checked | 选择每个被选中的元素 | 3 |
| :target | 选择当前的锚点元素 | 3 |
| :first-of-type | 选择满足是其父元素的第一个某类型子元素的元素 | 3 |
| :last-of-type | 选择满足是其父元素的最后一个某类型子元素的元素 | 3 |
| :only-of-type | 选择满足是其父元素的唯一一个某类型子元素的元素 | 3 |
| :nth-of-type(n) | 选择满足是其父元素的第 n 个某类型子元素的元素 | 3 |
| :nth-last-of-type(n) | 选择满足是其父元素的倒数第 n 个某类型的元素 | 3 |
| :only-child | 选择满足是其父元素的唯一一个子元素的元素 | 3 |
| :last-child | 选择满足是其父元素的最后一个元素的元素 | 3 |
| :nth-child(n) | 选择满足是其父元素的第 n 个子元素的元素 | 3 |
| :nth-last-child(n) | 选择满足是其父元素的倒数第 n 个子元素的元素 | 3 |
| :empty | 选择满足没有子元素的元素 | 3 |
| :in-range | 选择满足值在指定范围内的元素 | 3 |
| :out-of-range | 选择值不在指定范围内的元素 | 3 |
| :invalid | 选择满足值为无效值的元素 | 3 |
| :valid | 选择满足值为有效值的元素 | 3 |
| :not(selector) | 选择不满足 selector 的元素 | 3 |
| :optional | 选择为可选项的表单元素，即没有 “required” 属性 | 3 |
| :read-only | 选择有"readonly"的表单元素 | 3 |
| :read-write | 选择没有"readonly"的表单元素 | 3 |
| :root | 选择根元素 | 3 |
完整实例
简洁 html 文档，将需要手动为每个对象之后添加 “,” 符号以 ul 元素来增加，而不是每个 “,” 都占用一个 ul 元素，以下两种方式最终前端显示一致，但目标文档区域会更加简洁。
原始需求
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
<ul>
<li>
第一个
</li>
<li>
,
</li>
<li>
第二个
</li>
<li>
,
</li>
<li>
第三个
</li>
<li>
,
</li>
<li>
第四个
</li>
<li>
,
</li>
<li>
第五个
</li>
</ul>需求优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
ul{
list-style: none;
}
li{
display: inline;
}
li:not(:last-child)::after{
content: ", ";
}
</style>
</head>
<body>
<ul>
<li>
第一个
</li>
<li>
第二个
</li>
<li>
第三个
</li>
<li>
第四个
</li>
<li>
第五个
</li>
</ul>
</body>
</html>再次尝试
元素::after 和::before 的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。
使用::after 和::before 的时候一定要注意，必须设置 content，否则这两个伪元素是无法显示出来的。而 content 属性，会作为这两个伪元素的内容嵌入他们中。
<style>
p:before{
content: "he";
}
p:after{
content: ".cn";
}
</style>
<p>xingxing</p>以上实例中最终在前端将显示 hexingxing.cn
常见的::after 和::before 是虚拟元素，不会影响真正元素的所在文档的位置，对:first-child 或者:last-child 这种伪类选择不会造成影响。
常用元素
::first-letter
伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
::first-line
伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
::selection
伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。
::placeholder
伪元素 ::placeholder 用来设置表单元素的占位文本
0 条评论