参考手册
CSS 选择器
:active
:before
返回 CSS 选择器

CSS ::after 选择器

实例

在每个 <p> 元素的内容之后插入新内容：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p::after {
  6.   content: " - 记住";
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>我的名字是唐老鸭</p>
  13. <p>我住在 Ducksburg</p>
  15. </body>
  16. </html>
运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

选择器
::after4.09.03.53.17.0

注释：对于 IE8 及更早版本的浏览器中的 element>element，必须声明 <!DOCTYPE>。

定义和用法

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

实例

在每个 <p> 元素后面插入内容，并设置所插入内容的样式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p::after {
  6.   content: " - Remember this";
  7.   background-color: yellow;
  8.   color: red;
  9.   font-weight: bold;
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <h2>::after 选择器的 demo</h2>
  17. <p>我的名字是唐老鸭</p>
  18. <p>我住在 Ducksburg</p>
  20. </body>
  21. </html>
运行一下

相关页面

CSS 教程：CSS 伪元素

CSS 选择器参考手册：CSS :before 选择器

:active
:before

分类导航