持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情 原文链接：khizer khan
介绍
伪元素在不使用额外HTML元素的情况下为特定HTML元素添加样式或者额外内容。
语法
selector::pseudo-element {
property: value;
}
- ::before.
- ::after.
- ::first-letter.
- ::first-line.
- ::selection.
- ::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 和方向属性。
- 动画和过渡属性。
