CSS ::after 伪元素

定义和用法

CSS ::after 伪元素用于在指定元素的内容之后插入一些内容。

使用 content 属性指定要插入的内容。content 的值可以是：

• 字符串：content: "Hello world!";
• 图片：content: url(myimage.jpg);
• 无内容：content: none;
• 计数器：content: counter(li);
• 引号：content: close-quote;
• 属性值：content: " (" attr(href) ")";

提示：请注意，插入的内容仍然位于指定元素内部。插入的内容会添加到元素内部的其他内容之后。

使用 ::before 在特定元素的内容之前插入一些内容。

实例

例子 1

在每个 <p> 元素的内容之后插入一个字符串：

p::after {
  content: " - Remember this";
}

亲自试一试

例子 2

在每个 <p> 元素的内容之后插入一个字符串，并设置插入内容的样式：

p::after {
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

亲自试一试

CSS 语法

::after {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪元素的首个浏览器版本。

相关页面

教程：CSS 伪元素

参考：CSS ::before 伪元素