CSS 伪元素

CSS 伪元素是一种特殊的 CSS 选择器，它可以用来在元素的前面或后面插入特定的内容，或者对元素的某一部分进行样式设置。下面将介绍常见的伪元素及其应用。

::before和::after

::before和::after是两个最常用的伪元素。它们用来在元素的前面或后面插入内容，内容可以是纯文本、图像或其他 HTML 元素。

• 当要向某个元素前面或后面插入内容时，可以使用以下代码：

.element::before {
  content: "hello";
}

.element::after {
  content: url("image.png");
}

• 当要向某个元素前面或后面插入其他 HTML 元素时，可以使用以下代码：

.element::before {
  content: "<div>hello</div>";
}

.element::after {
  content: "<a href="#">link</a>";
}

请注意，上述代码中的content属性必须指定内容的类型，例如如果是文本，就需加上引号；如果是 HTML 元素，则需用尖括号将元素包起来。

::first-letter和::first-line

::first-letter伪元素用来设置元素内第一个字母的样式，而::first-line伪元素用来设置元素内第一行的样式。

• 当要设置标题的首字母样式时，可以使用以下代码：

h1::first-letter {
  font-size: 2em;
  color: red;
}

• 当要设置段落中第一行的样式时，可以使用以下代码：

p::first-line {
  font-weight: bold;
  color: blue;
}

请注意，::first-line 只适用于第一行，如果想设置其他行的样式，则必须使用其他选择器来实现。

::selection

::selection伪元素用来设置用户选中文本后的样式。

如果想要设置被选中的文本的背景色或文字颜色，可以使用以下代码：

::selection {
  background-color: yellow;
  color: red;
}

需要注意的是，该属性的样式不是所有浏览器都支持，尤其是移动端浏览器。

::placeholder

::placeholder伪元素用来设置输入框或文本区域的提示文本（placeholder）的样式。

• 当想要设置输入框中的提示文本的颜色或字体时，可以使用以下代码：

input::placeholder {
  font-style: italic;
  color: gray;
}

需要注意的是，该属性的样式也不是所有浏览器都支持，特别是老版本的浏览器。

总结

本文介绍了常见的伪元素及其应用，包括::before、::after、::first-letter、::first-line、::selection和::placeholder。除此之外，还有其他的伪元素，根据实际需求灵活运用即可。