CSS ::before 和 ::after 伪元素详解与示例

::before 和 ::after 的作用

::before 在元素中插入一个盒子，作为它的第一个子元素；::after 则作为最后一个子元素。盒子里放什么由 content 属性决定。HTML 中不会增加任何东西：浏览器根据 CSS 生成它们。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

HTML 里只有 9 和 Tests pass。美元符号、“/ month”标签和对勾都来自 CSS。它们会继承元素的样式（字体、颜色），除非你像上面的例子那样覆盖它们。

语法

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

content 是必需的。没有它，无论你给 ::before 和 ::after 写多少其他属性，它们都不会被创建。

用 content: "" 做装饰图形

使用 content: "" 时，伪元素是一个空盒子，你可以设置它的大小和颜色。它默认是行内的，而行内盒子会忽略 width 和 height，所以要给它 display: block、inline-block 或 position: absolute：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

定位伪元素

如果装饰要叠在元素上方或环绕在元素周围，就给伪元素设置 position: absolute，给元素本身设置 position: relative，这样偏移量就是相对于元素来计算的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

和伪类组合使用时要注意顺序：先写状态，再写伪元素，即 .link:hover::after，永远不要写成 .link::after:hover。

用 attr() 读取属性：提示框

attr() 把一个属性的值放进 content，这样一条规则就能在每个元素上显示不同的文字：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

只在悬停时出现的提示框，键盘用户和触屏用户都看不到。重要的内容请直接放在页面上，或者在元素上加 tabindex="0"，并在 :focus 时也显示它。

用计数器编号

CSS 计数器配合 ::before 可以自动编号，不用手动输入数字：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

增加或删除一个步骤，编号会自动更新。

::before 和 ::after 不起作用的地方

伪元素被插入到元素内部，位于它的开始标签和结束标签之间。没有“内部”的元素无法显示它们：

• <img>、<video>、<iframe>（替换元素）
• <input>、<select>、<textarea>（表单控件），以及 <br>

有些浏览器会在复选框或损坏的图片上绘制它们，但表现并不一致。请把伪元素放在外层元素上：<span class="field"><input></span>，然后给 .field::after 设置样式。

常见错误

• 没有 content。 这是什么都不显示的最常见原因。加上 content: ""。
• 给行内伪元素设置尺寸。 在设置 display: block、inline-block 或 position: absolute 之前，width 和 height 不起作用。
• 和状态组合时顺序写错。 a:hover::after 有效；a::after:hover 无效。
• 使用绝对定位，但父元素没有定位。 这时伪元素会对齐到某个较远的祖先元素。给元素加上 position: relative。
• 把真正的内容写在 CSS 里。 content 中的文字不能被选中或复制。信息要保留在 HTML 中。