介绍

伪元素在不使用额外HTML元素的情况下为特定HTML元素添加样式或者额外内容。

语法

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

1. ::before.
2. ::after.
3. ::first-letter.
4. ::first-line.
5. ::selection.
6. ::marker.

::before与::after

::before和::after是在HTML内容之前或者之后创建一个子元素！我们现在使用这两个伪元素必须指定content属性，它可以是字符串也可以是空内容！
代码片段
我们没有在 HTML 文件中添加任何额外元素，但我们仍然可以在灰色框中看到一些来自 CSS 的额外内容。如果通过开发者工具检查我们的段落元素，会看到我们的浏览器将我们的伪元素视为段落元素的子元素。
此外，我们可以为我们的伪元素添加额外的样式，例如我将 ::before 元素显示为块，将 ::after 显示为默认的内联元素。
请注意，不能对相同的 HTML 元素多次使用伪元素。

::first-letter

::first-letter 伪元素将样式应用于块元素第一行的第一个字母。
代码片段
注意：如果将 ::before 伪元素与 ::first-letter 一起使用，则首字母样式将应用于 ::before 伪元素注入内容的首字母。
我们可以为 ::first-letter 伪元素使用以下样式

• 所有字体属性。
• 所有背景属性。
• 所有边距属性。
• 所有填充属性。
• 所有边框属性。
• 颜色属性。
• text-decoration, text-shadow, text-transform, letter-spacing, word-spacing , line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow ，float，vertical-align（仅当float为none时）CSS属性

::first-line

::first-line 伪元素将样式应用于块元素的第一行。
我们可以为 ::first-line 伪元素使用以下样式

• 所有字体属性。
• 所有背景属性。
• 颜色属性。
• 字间距、字母间距、文本装饰、文本转换、行高文本阴影、文本装饰颜色、文本装饰线、文本装饰样式和垂直对齐。
  代码片段
  注意：第一行伪元素样式将取决于内容的长度、块元素的宽度、字体大小、文档的宽度

::selection

::selection 伪元素将样式应用于页面上突出显示的内容。

代码片段
我们可以为 ::selction 伪元素使用以下样式

• 背景颜色。
• 颜色属性。
• 文字装饰，文字阴影。

::marker

::marker 伪元素将样式应用于列表项的标记框，该列表项可以是无序列表或有序列表。
代码片段

我们可以为 ::marker 伪元素使用以下样式

• 所有字体属性。
• 颜色属性。
• 空白属性。
• text-combine-upright、unicode-bidi 和方向属性。
• 动画和过渡属性。