CSS 伪元素

CSS伪元素（Pseudo-elements）是CSS中用于选择文档树中不存在的部分，并为这些部分添加样式。它们以双冒号（::）开头（在CSS3中引入，但一些旧的伪元素如:first-line和:first-letter仍然可以使用单冒号），并且与选择器一起使用来指定要应用样式的虚拟部分。在本文中，我们将探讨一些常用的CSS伪元素，并了解如何使用它们来增强网页的视觉效果。

1. ::before 和 ::after 伪元素

::before 和 ::after 是最常用的CSS伪元素，它们用于在选定元素的内容之前或之后插入内容。这些伪元素通常与content属性一起使用来指定要插入的内容。

/* 在所有段落之前插入“Note: ” */
p::before {
    content: "Note: ";
    font-weight: bold;
    color: red;
}

/* 在所有段落之后插入一个星号 */
p::after {
    content: "*";
    color: blue;
}

注意：在CSS2.1及更早版本中，这些伪元素使用单冒号（:before 和 :after）。为了向后兼容，许多开发者仍然使用单冒号，但现代CSS建议使用双冒号。

2. ::first-line 伪元素

::first-line 伪元素用于选择块级元素的首行文本，并允许你仅对该行应用样式。

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

在这个例子中，每个段落的首行文本都会以粗体和绿色显示。

3. ::first-letter 伪元素

::first-letter 伪元素用于选择块级元素的首字母，并允许你仅对该字母应用样式。

p::first-letter {
    font-size: 2em;
    color: orange;
    float: left;
    margin-right: 0.1em;
}

在这个例子中，每个段落的首字母会以两倍的字体大小、橙色显示，并且会浮动到左侧，与其余文本之间有一点右边距。

4. ::selection 伪元素

::selection 伪元素用于选择用户用鼠标或其他方式选中的文本部分，并允许你改变选中文本的样式。请注意，这个伪元素在某些旧版浏览器中可能不受支持。

/* 改变选中文本的样式 */
::selection {
    background: yellow;
    color: black;
}

在这个例子中，当用户选中文本时，选中区域的背景会变成黄色，文本颜色会变成黑色。

5. ::placeholder 伪元素

::placeholder 伪元素用于选择输入框中的占位符文本（即提示用户输入内容的灰色文本）。这个伪元素在表单设计中非常有用。

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

在这个例子中，输入框中的占位符文本会以灰色和斜体显示。

总结

CSS伪元素提供了一种强大的方式来选择文档树中不存在的部分，并为这些部分添加样式。通过合理使用伪元素，你可以增强网页的视觉效果，提高用户体验。希望这篇教程能帮助你更好地理解和使用CSS伪元素。记住，伪元素与伪类不同，它们选择的是文档树中不存在的虚拟部分，而伪类选择的是文档树中存在的元素但基于其特定状态或特征。

本文地址：https://www.tides.cn/p_css-pseudo-element