after 是 CSS 的一种伪元素选择器, 用于在被选元素的内容后面插入内容, 通常会配合使用 content 属性来指定要插入的内容.
:after 选择器的作用就是在指定的元素内容 (而不是元素本身) 之后插入一个包含 content 属性指定内容的行内元素.
- /* Add an arrow after links */
- a::after {
- content: "→";
- }
语法:
- element:after {
- style properties
- } /* CSS2 语法 */
- element::after {
- style properties
- } /* CSS3 语法 */
::after 表示法是在 CSS 3 中引入的,:: 符号是用来区分伪类和伪元素的. 支持 CSS3 的浏览器同时也都支持 CSS2 中引入的表示法: after.
注: IE8 仅支持: after.
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .boring-text::after { content: "
- <- 无聊! ";
- color: red;
- }
- </style>
- </head>
- <body>
- <p class="boring-text
- ">这是些无聊的文字</p>
- <p > 这是不无聊也不有趣的文字</p>
- </body>
- </HTML>
效果图:
伪元素介绍
"伪元素", 顾名思义. 它创建了一个虚假的元素, 并插入到目标元素内容之前或之后.
单词 "pseudo" 是希腊语的英译, 它的基本意思是 "说谎的, 不诚实的, 错误的." 因此叫伪元素是适合的. 因为在文档中它不实际改变什么. 相反的, 它们是像幽灵一般的元素插入在 CSS 中, 他们对用户是可见的, 可以通过 CSS 控制.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16003.html