::after

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

在 CSS 中,::after 会创建一个伪元素,作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。默认情况下,它是行向布局的。

尝试一下

备注: ::before::after 生成的伪元素是行级盒子,就好像它们是应用它们的元素或“源元素”的直接子元素,因此不能应用于替换元素(如 <img>),它们的内容在不受当前文档样式的影响的情况下被替换。

语法

css
::after {
  content: /* 值 */;
  /* 其他属性 */
}

如果未指定 content 属性、属性值无效或属性值为 normalnone,则不会渲染 ::after 伪元素。其行为与设置了 display: none 相同。

备注: CSS 引入 ::after 表示法(两个冒号)是用来区分伪类伪元素的。同时为了向后兼容,浏览器也支持较早引入的 :after

示例

简单用法

让我们创建两个类:一个用于枯燥的段落,一个用于精彩的段落。我们可以使用这些类在段落末尾添加伪元素。

HTML

html
<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在 MDN 上做贡献简单又轻松!</p>

CSS

css
.exciting-text::after {
  content: "<- 让人兴兴兴奋!";
  color: green;
}

.boring-text::after {
  content: "<- 无聊!";
  color: red;
}

结果

装饰性用法

我们几乎可以用想要的任何方法给 content 属性里的文字和图片的加上样式。

HTML

html
<span class="ribbon">看看这段文字后的橙色盒子。</span>

CSS

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

.ribbon::after {
  content: "这是一个漂亮的橙色盒子。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

结果

工具提示

本例使用 ::after,结合 attr() CSS 表达式和 data-descr 自定义数据属性,创建工具提示。无需 JavaScript!

我们还可以使用此技术为键盘用户提供支持,方法是添加一个值为 0tabindex 使每个 span 都可通过键盘操作聚焦,并使用 CSS :focus 选择器。这说明了 ::before::after 可以多么灵活,不过要获得最方便的体验,以其他方式创建的语义披露部件(如使用 detail 和 summary 元素)可能更合适。

HTML

html
<p>
  这里我们有包含了一些<span tabindex="0" data-descr="鼠标悬停时出现的小弹出窗口"
    >工具提示</span
  ><span tabindex="0" data-descr="文字和标点符号的集合">文字</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;
}

结果

无障碍考虑

不鼓励使用 ::after 伪元素来添加内容,因为屏幕阅读器无法可靠地访问它。

规范

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::after
Animation and transition support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

参见