::after

在 CSS 中，**::after** 创建一个伪元素，它是所选元素的最后一个子元素。它通常与content 属性一起使用，为元素添加装饰性内容。默认情况下它是内联的。

试一试

注意：由 ::before 和 ::after 生成的伪元素是内联框，生成的就像它们是应用它们的元素（或“源元素”）的直接子元素一样，因此不能应用于替换元素，例如<img>，其内容被替换，不受当前文档样式的影响。

语法

css
::after {
  content: /* value */;
  /* properties */
}

如果未指定content 属性，其值无效，或其值为 normal 或 none，则不会呈现 ::after 伪元素。它的行为就像设置了 display: none 一样。

注意：CSS 引入了 ::after 表示法（带两个冒号）来区分伪类和伪元素。为了向后兼容，浏览器也接受之前引入的 :after。

无障碍访问

不建议使用 ::after 伪元素添加内容，因为它无法可靠地被屏幕阅读器访问。

示例

简单用法

让我们创建两个类：一个用于普通的段落，一个用于令人兴奋的段落。我们可以使用这些类在段落的末尾添加伪元素。

HTML

html
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

CSS

css
.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

结果

装饰性示例

我们几乎可以以任何我们想要的方式设置content 属性中的文本或图像的样式。

HTML

html
<span class="ribbon">Look at the orange box after this text. </span>

CSS

css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

结果

工具提示

此示例使用 ::after，结合attr() CSS 表达式和 data-descr 自定义数据属性，来创建工具提示。不需要 JavaScript！

我们还可以通过这种技术支持键盘用户，方法是添加 tabindex 为 0 以使每个 span 可聚焦键盘，并使用 CSS :focus 选择器。这展示了 ::before 和 ::after 的灵活性，尽管为了获得最易访问的体验，以其他方式创建的语义公开小部件（例如使用details 和 summary 元素）可能更合适。

HTML

html
<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">
    text
  </span>
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">
    tooltips</span
  >.
</p>

CSS

css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

结果

规范

规范
CSS 伪元素模块级别 4
# generated-content

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅