::after

版本：CSS3

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

语法:

• ::after选择器向选定的元素之后插入内容，并且它生成包含放置在元素中的内容之后的生成内容的伪元素。
• ::after选择器使用content 属性来指定要插入的内容。
• ::after选择器在默认情况下，此伪元素是内联的，但是可以使用属性显示更改。
• ::after选择器CSS3将伪对象选择符(Pseudo-ElementSelectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-ClassesSelectors)，但以前的写法仍然有效。即:after可转化为::after
• ::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。注: IE8仅支持:after。

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

/* add an arrow after links */
a::after {
  content: "→";
}

Firefox 3.5 note

Firefox 3.5之前版本仅实现了CSS 2.0版本的语法:after.且不允许在position, float, list-style-*等属性中使用。Firefox 3.5开始没有了这项限制。

浏览器支持

例子

p:after{
				content:"-台词";
				background-color:yellow;
				color:red;
				font-weight:bold;
			} 
我是唐老鸭。
我住在duckburg。

简单用法

让我们创建两个类：一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。

这是些无聊的文字
这是不无聊也不有趣的文字
在mdn上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！
.exciting-text::after {
  content: "

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com