CSS Pseudo-elements

伪类可以定义为与选择器结合的关键字，用于定义所选元素的特殊状态。与伪类不同，伪元素用于为元素的特定部分设置样式，而伪类用于为元素设置样式。

例如，伪元素可用于为元素的第一个字母或第一行设置样式。伪元素还可用于在元素之后或之前插入内容。

语法

伪元素具有如下所示的简单语法

我们在语法中使用了双冒号表示法 (::pseudo-element)。在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪元素和伪类。因此，建议使用双冒号表示法 (::pseudo-element)，而不是使用单冒号表示法 (:)。

在 CSS1 和 CSS2 中，伪元素和伪类都使用了单冒号 (:) 语法。为了向后兼容，单冒号语法在 CSS1 和 CSS2 中对伪元素是有效的。

尽管有几个 CSS 伪元素，但我们正在讨论一些最常用的伪元素。广泛使用的 CSS 伪元素如下表所示

让我们结合示例讨论上述伪元素。

::first-letter 伪元素

顾名思义，它影响文本的第一个字母。它只能应用于块级元素。它不支持所有 CSS 属性，但支持下面给出的一些 CSS 属性。

• 颜色属性 (例如 color)
• 字体属性 (例如 font-style、font-family、font-size、font-color 等)。
• 边距属性 (例如 margin-top、margin-right、margin-bottom 和 margin-left)。
• 边框属性 (例如 border-top、border-right、border-bottom、border-left、border-color、border-width 等)。
• 内边距属性 (例如 padding-top、padding-right、padding-bottom 和 padding-left)。
• 背景属性 (例如 background-color、background-repeat、background-image 和 background-position)。
• 文本相关属性 (例如 text-shadow、text-transform、text-decoration 等)。
• 其他属性包括 vertical-align (仅当 float 为 'none' 时) word-spacing、line-height、line-spacing 等。

示例

输出

::first-line 伪元素

它类似于 ::first-letter 伪元素，但它影响整个行。它为文本的第一行添加特殊效果。它支持以下 CSS 属性

• 颜色属性 (例如 color)
• 字体属性 (例如 font-style、font-family、font-size、font-color 等)。
• 背景属性 (例如 background-color、background-repeat、background-image 和 background-position)。
• 其他属性包括 word-spacing、letter-spacing、line-height、vertical-align、text-transform、text-decoration。

示例

在此示例中，我们将看到 ::first-line 元素的使用，以向元素的第一行添加特殊效果。

输出

::before 伪元素

它允许我们在元素内容之前添加内容。它用于在元素的特定部分之前添加内容。通常，它与 content 属性一起使用。

我们还可以使用此伪元素在内容之前添加常规字符串或图像。

示例

输出

::after 伪元素

它与 ::before 伪元素类似，但它在元素内容之后插入内容。它用于在元素的特定部分之后添加内容。通常，它与 content 属性一起使用。

它还允许我们在内容之后添加常规字符串或图像。

示例

输出

::selection 伪元素

它用于为用户选择的元素部分设置样式。我们可以将以下 CSS 属性与它一起使用

• 颜色。
• 背景颜色。
• 其他属性包括 cursor、outline 等。

示例

输出

CSS 类和伪元素

伪元素可以与 CSS 类结合使用，以样式化具有该类的特定元素。CSS 类与伪元素结合的语法如下。

语法

它可以写成

示例

此示例将影响具有 class="example" 的 <h1> 元素的第一个字母，而不是影响所有 <h1> 元素。

输出