CSS - 伪元素

CSS伪元素 Pseudo-elements

理解：可以理解伪元素是元素中的一部分，不是一个真实的元素，与元素有相同CSS作用。
说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的。

作用：CSS 伪元素用于向某些选择器设置特殊效果。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

---

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。 (一段中的第一行的样式)
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;  # 小型大写字母
  }

试验结果：

图片.png

注释："first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

图片.png

---

伪元素和 CSS 类

伪元素可以与 CSS 类配合使用：

p.article:first-letter
  {
  color: #FF0000;
  }

This is a paragraph in an article。

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多重伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

CSS3中 :before和:after伪元素

http://www.php.cn/css-tutorial-379053.html

众所周知::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。

---

关于伪类选择器中一个冒号和两个冒号的区别

https://www.cnblogs.com/zhangruiping/p/4296548.html

---

伪类和伪元素区别：
伪类：

图片.png

伪元素：

图片.png

伪类偏向于元素的动作行为，伪元素偏向于元素的属性。实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

所以在CSS3中最好使用双冒号来写伪元素。