伪元素

bookmark_border 通过集合保持井井有条 根据您的偏好保存内容并进行分类。

CSS 播客 - 014：伪元素

如果您有一篇文章内容，并且希望首字母变成更大的首字下沉效果，您该如何实现呢？

在 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

::before 和 ::after 伪元素都会在一个元素内创建一个子元素，仅当您定义了 content 属性时。

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

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

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

一旦创建了 ::before 或 ::after 元素，您就可以随意对其进行样式设置，没有限制。您只能将 ::before 或 ::after 元素插入到将接受子元素的元素中（具有文档树的元素），因此诸如 <img />、<video> 和 <input> 之类的元素将不起作用。

::first-letter

我们在本课程的开始部分遇到了这个伪元素。值得注意的是，并非所有 CSS 属性都可以在定位 ::first-letter 时使用。可用的属性有

• 颜色
• 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-line

::first-line 伪元素将允许您仅在应用了 ::first-line 的元素具有 display 值为 block、inline-block、list-item、table-caption 或 table-cell 时，设置文本首行的样式。

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

与 ::first-letter 伪元素一样，只有一部分 CSS 属性可以使用

• 颜色
• background 属性
• font 属性
• text 属性

::backdrop

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

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

::marker

::marker 伪元素允许您设置列表项的bullet或编号的样式，或 <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 */
}

只有一小部分 CSS 属性支持 ::marker

• 颜色
• content
• white-space
• font 属性
• animation 和 transition 属性

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

::selection

::selection 伪元素允许您设置选定文本的外观样式。

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

此伪元素可用于设置如上述演示中所示的所有选定文本的样式。它也可以与其他选择器结合使用，以获得更具体的选择样式。

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

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

• 颜色
• background-color 但不包括 background-image
• text 属性

::placeholder

您可以向表单元素（例如带有 placeholder 属性的 <input>）添加帮助提示。::placeholder 伪元素允许您设置该文本的样式。

input::placeholder {
  color: darkcyan;
}

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

• 颜色
• background 属性
• font 属性
• text 属性

::cue

伪元素之旅的最后一站是 ::cue 伪元素。这允许您设置 WebVTT 提示的样式，WebVTT 提示是 <video> 元素的字幕。

您还可以将选择器传递到 ::cue 中，这允许您设置字幕内部特定元素的样式。

video::cue {
  color: yellow;
}

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

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

检查您的理解程度

测试您对伪元素的知识