CSS 伪元素完全解析

伪元素是附加到选择器上的关键字，它允许我们样式化元素的特定部分。例如，我们可以对段落的第一行进行样式化，在元素之前或之后插入内容，或者用最少的代码创建复杂的效果。伪元素用双冒号（INLINECODE9ba70ae9）表示（在旧版 CSS 中也使用单冒号 INLINECODE64ba97d6）。

语法

selector::pseudo-element{
    property: value
}

::（双冒号是伪元素的语法）

常用 CSS 伪元素

1. ::before

::before 伪元素 允许我们在元素的实际内容之前插入内容。

HTML


CODEBLOCK_03646ffe


2. ::after

与 INLINECODE3a6ded93 类似，INLINECODE6c3bef35 伪元素 在元素的内容之后插入内容。它通常用于添加图标、样式提示或附加细节。

HTML


CODEBLOCK_02d4a574


3. ::first-letter

::first-letter 伪元素 用于定位文本块的第一个字母，通常用于段落中的装饰性首字母。

HTML


CODEBLOCK_d380ecd9


4. ::first-line

::first-line 伪元素 用于样式化文本块的第一行。这对于强调段落的引言特别有用。

HTML


CODEBLOCK_d5d7da9f


5. ::placeholder

::placeholder 伪元素 用于样式化输入框内的占位符文本。

HTML


CODEBLOCK_2a606126


6. ::marker

用于样式化列表项的标记。

HTML


CODEBLOCK_8ed0c9b3


7. ::selection

用于样式化被选中的文本。

HTML


CODEBLOCK_969ce140


8. ::backdrop

用于样式化如 等模态元素的背景幕。它帮助我们样式化作为模态在用户屏幕上打开的对话框的背景。

HTML


“

dialog::backdrop {

background: rgba(232, 233, 0, 0.5);

}

dialog {

border: none;

padding: 20px;

background: white;