CSS 伪元素

在 CSS 中，伪元素是一种可以在元素存在的特殊区域内添加样式的选择器。 它们在创建时不会出现在 DOM 中，因此不会影响页面的结构，但它们可以让你对元素的某些部分应用特定的样式。

CSS 伪元素由双冒号 (::) 前缀开头，并且仅作为选择器的一部分。

::before 和 ::after

::before 和 ::after 伪元素分别在元素的内容前面和内容后面创建一个新的元素。我们可以使用 content 属性来指定它们的内容和样式。例如，以下代码将在每个 h1 元素前面添加一个装饰性的“#”符号：

h1::before {
  content: "#";
  margin-right: 10px;
}

::first-letter 和 ::first-line

::first-letter 和 ::first-line 分别用于选择元素的第一个字母或第一行，通常用于设置首字母大写或第一行的样式。例如，以下代码将第一个段落的第一个字母设置为红色并将其字体大小增大：

p:first-letter {
  color: red;
  font-size: 150%;
}

以下代码将第一个段落的第一行设置为斜体：

p:first-line {
  font-style: italic;
}

::selection

::selection 伪元素用于选择被用户选择的文本。例如，以下代码将所选文本的背景颜色设置为淡蓝色：

::selection {
  background-color: lightblue;
}

::placeholder

::placeholder 伪元素用于向输入字段添加占位文本。例如，以下代码将所有输入字段的占位文本字体颜色设置为灰色：

input::placeholder {
  color: gray;
}

总结

CSS 伪元素是实现特定样式效果的好方法，但是要注意它们不会影响页面的结构。掌握伪元素能够使你更好地利用 CSS 的功能，让你的网站更加漂亮。