伪元素

CSS 播客 - 第 14 集：伪元素

如果您有一篇文章，并且希望首字母采用大号悬挂字母，该如何实现？

在 CSS 中，您可以使用 ::first-letter 伪元素来实现此类设计细节。

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

伪元素就像添加或定位额外的元素一样，而无需添加更多 HTML。此示例解决方案使用 ::first-letter，是众多伪元素之一。它们具有多种作用，在本课程中，您将了解可用的伪元素以及如何使用它们。

::before和::after

只有在您定义 content 属性的情况下，::before 和 ::after 伪元素才会在元素内创建子元素。

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content 可以是任何字符串，甚至是空字符串，但请注意，除了空字符串之外的任何内容都可能会被屏幕阅读器读出。您可以添加图片 url，它会以原始尺寸插入图片，因此您无法调整其大小。您还可以插入 counter。

关键字： 您可以创建一个命名计数器，然后根据其在文档流中的相应位置对其进行递增。它们在各种情境中都非常有用，例如自动为大纲编号。

创建 ::before 或 ::after 元素后，您可以随意设置其样式，没有任何限制。您只能将 ::before 或 ::after 元素插入到接受子元素的元素（具有文档树的元素），因此 <img />、<video> 和 <input> 等元素不适用。

：input[type="checkbox"] 是一个例外情况。它可以有伪元素子元素。

::first-letter

我们在本课程开头就介绍过此伪元素。值得注意的是，定位 ::first-letter 时，并非所有 CSS 属性都可用。可用的属性包括：

• color
• background 属性（例如 background-image）
• border 属性（例如 border-color）
• float
• font 属性（例如 font-size 和 font-weight）
• 文本属性（例如 text-decoration 和 word-spacing）

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

注意： 您只能对区块容器使用 :first-letter。因此，如果您尝试将其添加到具有 display: inline 的元素，则无法正常运行。

::first-line

只有当应用了 ::first-line 的元素的 display 值为 block、inline-block、list-item、table-caption 或 table-cell 时，您才能使用 ::first-line 伪元素为第一行文本设置样式。

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

与 ::first-letter 伪元素一样，您只能使用部分 CSS 属性：

• color
• background 个房源
• font 个房源
• text 个房源

::backdrop

如果您有以全屏模式呈现的元素（例如 <dialog> 或 <video>），则可以使用 ::backdrop 伪元素为背景（元素与页面其余部分之间的空间）设置样式：

video::backdrop {
  background-color: goldenrod;
}

::marker

借助 ::marker 伪元素，您可以为列表项的圆点或数字或 <summary> 元素的箭头设置样式。

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker 仅支持一小部分 CSS 属性：

• color
• content
• white-space
• font 个房源
• animation 和 transition 属性

您可以使用 content 属性更改标记符号。例如，您可以使用此方法为 <summary> 元素的关闭和空状态设置加号和减号符号。

::selection

借助 ::selection 伪元素，您可以设置所选文本的外观样式。

::selection {
  background: green;
  color: white;
}

此伪元素可用于为所有所选文本设置样式，如上方演示所示。 它还可以与其他选择器结合使用，以实现更具体的选择样式。

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

与其他伪元素一样，仅允许使用部分 CSS 属性：

• color
• background-color，但不是 background-image
• text 个房源

::placeholder

Browser Support

• 57
• 79
• 51
• 10.1

Source

您可以为表单元素添加辅助提示，例如使用 placeholder 属性添加 <input>。借助 ::placeholder 伪元素，您可以为该文本设置样式。

input::placeholder {
  color: darkcyan;
}

::placeholder 仅支持一部分 CSS 规则：

• color
• background 个房源
• font 个房源
• text 个房源

注意： placeholder 不是 <label>，不应用来替代 <label>。表单元素必须带有标签，否则用户将无法访问。

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

伪元素导览的最后一项是 ::cue 伪元素。这样，您就可以设置 WebVTT 提示（即 <video> 元素的字幕）的样式。

您还可以将选择器传递给 ::cue，以便为标题中的特定元素设置样式。

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

检查您的理解情况

测试您对伪元素的知识

以下哪些不是伪元素？

::before

别忘了添加 content: '';。

::first-paragraph

CSS 中不存在此属性。

::after

别忘了添加 content: '';。

::marker

当您使用列表元素或显示类型时，这是项目符号元素。

::pencil

CSS 中不存在此属性。

:active

这是一个伪类，而不是伪元素。

您可以在 HTML 文件中找到伪元素。

正确

虽然开发者工具可能会在“元素”面板中显示伪元素，但您不会在 HTML 中找到伪元素，因为它们归浏览器所有。

错误

您可以通过 CSS 定位到这些元素，但在 HTML 中找不到它们。