::after

版本： CSS3

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

语法:

E :: after { sRules }

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

/* 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开始没有了这项限制。

浏览器支持


IE9+以及新版浏览器都支持 `::after`
IE8以及早期IE版本不支持 `::after`

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p:after{
				content:"-台词";
				background-color:yellow;
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
	<div>
		<p>我是唐老鸭。</p>
		<p>我住在duckburg。</p>
	</div>
	</body>
</html>

我是唐老鸭。

我住在duckburg。

简单用法

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

<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在mdn上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>


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

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

这是些无聊的文字

这是不无聊也不有趣的文字

在mdn上做贡献简单又轻松。按右上角的编辑按钮添加新示例或改进旧示例！

装饰用法

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

<span class="ribbon">notice where the orange box is.</span>

.ribbon::after {
  content: "look at this orange box.";
  border-style: dotted;
}

notice where the orange box is.

提示用法

接下来的示例展示了用 ::after 伪元素， attr() CSS表达式和一个自定义数据属性 data-descr 创建一个纯CSS,词汇表提示工具。在单独页面看这个例子。

<p>这是上面代码的实现<br />
  我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
  <span data-descr="small popups which also hide again">提示</span>。<br />
  把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>



span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::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;
}

这是上面代码的实现
我们有一些文字有一些提示。
把鼠标放上去看看 .

返回CSS导航

::after

语法:

浏览器支持

例子

简单用法

装饰用法

提示用法