前端必知必会-CSS布局伪元素

---

CSS 伪元素

CSS 伪元素用于设置元素的指定部分的样式。
例如，它可用于：

• 设置元素的第一个字母或行的样式
• 在元素内容之前或之后插入内容

伪元素的语法：

selector::pseudo-element {
property: value;
}

::first-line 伪元素

::first-line 伪元素用于向文本的第一行添加特殊样式。

以下示例格式化所有 <p> 元素中文本的第一行：

示例

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

• 字体属性font
• 颜色属性color
• 背景属性background
• 字间距word-spacing
• 字母间距letter-spacing
• 文本装饰text-decoration
• 垂直对齐vertical-align
• 文本变换text-transform
• 行高line-height
• 浮动float
• 清除clear

请注意双冒号符号 - ::first-line 与 :first-line

双冒号取代了 CSS3 中伪元素的单冒号符号。这是 W3C 区分伪类和伪元素的尝试。

CSS2 和 CSS1 中的伪类和伪元素均使用单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可以使用单冒号语法。

::first-letter 伪元素

::first-letter 伪元素用于向文本的第一个字母添加特殊样式。

以下示例格式化所有 <p> 元素中文本的首字母：

示例

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

注意：::first-letter 伪元素只能应用于块级元素。

以下属性适用于 ::first-letter 伪元素：

• 字体属性font
• 颜色属性color
• 背景属性background
• 边距属性margin
• 填充属性padding
• 边框属性border
• 文本装饰text-decoration
• 垂直对齐vertical-align（仅当“float”为“none”时）
• 文本变换text-transform
• 行高line-height
• 浮动float
• 清除clear

伪元素和 HTML 类

伪元素可以与 HTML 类结合使用：

示例

p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}

上面的例子将使用红色和较大的字体显示带有 class=“intro” 的段落的首字母。

多个伪元素

也可以组合多个伪元素。

在以下示例中，段落的首字母将为红色，字体大小为 xx-large。第一行的其余部分将为蓝色，并使用小写字母。段落的其余部分将使用默认字体大小和颜色：

示例

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

p::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS - ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

以下示例在每个 <h1> 元素的内容之前插入一个图像：

示例

h1::before {
content: url(smiley.gif);
}

CSS - ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

以下示例在每个 <h1> 元素的内容之后插入一个图像：

示例

h1::after {
content: url(smiley.gif);
}

CSS - ::marker 伪元素

::marker 伪元素选择列表项的标记。

以下示例设置列表项的标记样式：

示例

::marker {
color: red;
font-size: 23px;
}

CSS - ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可应用于 ::selection：颜色、背景、光标和轮廓。

以下示例使选定的文本在黄色背景上显示为红色：

示例

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

---

总结

本文介绍了的CSS布局伪元素使用，如有问题欢迎私信和评论