CSS 教程 / CSS 伪元素：用 ::before 和 ::after 添加装饰

CSS 伪元素用于为元素的特定部分设置样式或生成额外的呈现盒。::before 和 ::after 可以添加装饰性内容，但必要信息应保留在 HTML 中，而不应依赖生成的内容。

区分伪类和伪元素

CSS 组合符与伪类介绍了按现有元素的状态或条件进行选择的方法。a:hover针对鼠标悬停的链接本身。伪元素针对元素的特定部分或其创建的表示。a::after装饰在链接内容后创建的伪元素。在新代码中，对于伪类使用一个冒号，对于伪元素使用两个冒号，以便更容易区分两者。

a:hover { color: #1d4ed8; }
a::after { content: ""; }

::before 和 ::after 在元素内容的前后生成盒子，不会在所选元素外添加真正的 HTML 兄弟标签。开发者工具可能将它们显示为单独的行，但原始 HTML 中没有因此增加 span。不能像查找普通 DOM 子元素那样取得一个对应的独立元素节点。

理解 content 与 display

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" 创建一个没有文本的伪元素。即使内容为空，如果你给予它背景和尺寸，它也可以作为装饰性方块出现。另一方面，如果省略 content 属性或将其更改为 none，则不会创建此伪元素，即使添加了尺寸和背景，点也不会出现。

::before 和 ::after 的默认显示方式是行内（inline）。使用 inline-block 用于需要明确宽度和高度的装饰性圆点，使用 block 在内容下方显示一条线。对于这些伪元素，省略 content 或将其设置为 none 可以防止生成框。更多详情，请参见 CSS display：block、inline、inline-block 与隐藏内容。参见 MDN: ::before。

currentColor 是一个关键字，指的是元素的颜色值，即当前文本颜色。如果你将标题从绿色改为蓝色，伪元素的背景也会使用相同的颜色。border-radius: 50% 将相同宽度和高度的盒子圆角化，使其看起来像圆形。margin-right 是圆点与字母之间的外部间距。

在标题前添加一个点，在链接下添加一条线

下面的完整示例在标题前创建一个12像素的点，在链接下创建一条2像素的线。示例用 text-decoration: underline 保留链接自身的下划线，因此即使额外的装饰线消失，链接仍容易辨认。在鼠标悬停或键盘聚焦时，装饰线会变粗到4像素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

将其保存为index.html并运行。标题保留实际文本“Small Garden”，前面的圆圈是CSS装饰。链接也有名称“Visitor Information”和HTML 中指定的跳转地址。a:hover::after是一个在悬停状态下选择a的after的表达式。如果按冒号数量和选择顺序分别阅读，较长的选择器会更容易理解。

该图说明了带或不带装饰性伪元素的同一HTML。文本和链接目标保持不变。在完整示例中，装饰性链接线默认为2px高，悬停或键盘聚焦时变为4px。

在HTML中保留必要信息

不同的屏幕阅读器和浏览器可能以不同方式呈现生成的内容，因此不要仅依赖于在伪元素中放置关键信息。将条件写在实际标签文字或说明句中比仅用 content: "Required" 告知输入条件更清晰。仅凭伪元素在视觉上可见，不能判断其内容是否能被辅助技术可靠读取。

img 属于替换元素，其内容由外部资源决定，不能按普通内容元素的方式使用 ::before 和 ::after。应将其应用于包含内容的元素，例如 h1 或 a，如本例所示。如果你需要在图像周围进行装饰，可以考虑在图像外围使用一个单独的 HTML 元素，并装饰该元素的伪元素。

诊断缺失的伪元素

1. 将 h1::before 中的 content: ""; 替换为 content: none;。标题文本应保持不变，但仅点应消失。确认后，将其恢复为空字符串。
2. 在点上将 display: inline-block; 替换为 display: inline;。请注意，没有文本的行内装饰仅依靠宽·高无法保持原本 12px 的点。恢复为 inline-block。
3. 将 h1 的颜色更改为 #1d4ed8。确保点也为蓝色，并且链接保持绿色。currentColor 并不指整个页面的单一颜色。
4. 将鼠标悬停在链接上，观察线条是否变粗。移开鼠标后，使用 Tab 将焦点移动到链接上，并检查线条和轮廓是否同时可见。

检查时，首先检查选择器是否与实际元素匹配，以及内容是否有效，然后查看显示、大小和背景。如果将链接装饰线的高度更改为 0，线条将不可见，但通过 content 生成的伪元素本身不一定会消失。区分“元素未创建”和“创建了但没有绘制区域”可以帮助你缩小故障原因。

练习后，恢复原始值并保存。伪元素可以在不增加额外 HTML 元素的情况下提供装饰，但重要内容必须独立于装饰而仍可用。从点或线开始，并检查实际文本、链接目标和键盘行为是否保持完整。