---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
  - CSS伪元素
  - getComputedStyle
  - getPropertyValue
  - setProperty
  - 布局
  - 需要移动端浏览器兼容性
translation_of: 'Web/CSS/::after'
---
<div>{{ CSSRef() }}</div>

<p>CSS<a href="/zh-CN/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a><code>::after</code>用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。</p>

<pre><code>/* Add an arrow after links */
a::after {
  content: "</code>→<code>";
}</code></pre>

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

<h2 id="语法">语法</h2>

<pre class="syntaxbox">element:after  { <em>style properties</em> }  /* CSS2 语法 */

element::after { <em>style properties</em> }  /* CSS3 语法 */</pre>

<p><code>::after表示法是在</code>CSS 3中引入的，::符号是用来区分<a href="/zh-CN/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法<code>:after。</code></p>

<div class="note"><strong>注:</strong> IE8仅支持<code>:after。</code></div>

<h2 id="示例">示例</h2>

<h3 id="简单用法">简单用法</h3>

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

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

<pre class="brush: css">.exciting-text::after {
  content: "&lt;- 让人兴兴兴奋!";
  color: green;
}

.boring-text::after {
   content:    "&lt;- 无聊!";
   color:      red;
}</pre>

<h4 id="输出" style="line-height: 18px;">输出</h4>

<p>{{ EmbedLiveSample('Simple_usage', 500, 150) }}</p>

<h3 id="装饰用法">装饰用法</h3>

<p>我们几乎可以用想要的任何方法给 {{ cssxref("content") }} 属性里的文字和图片的加上样式.</p>

<pre class="brush: html">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>

<pre class="brush: css">.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}</pre>

<h4 id="输出_2" style="line-height: 18px;">输出</h4>

<p>{{ EmbedLiveSample('Decorative_example', 450, 20) }}</p>

<h3 id="提示用法">提示用法</h3>

<p>接下来的示例展示了用<code>::after</code><a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a>，<a href="/en-US/docs/CSS/attr" title="/en-US/docs/CSS/attr"><code>attr()</code></a>CSS表达式和一个<a href="/en/HTML/Global_attributes#attr-data-*" title="en/HTML/Global_attributes#attr-data-*">自定义数据属性</a> <code>data-descr</code> 创建一个纯CSS, 词汇表提示工具。在<a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html" title="css-only_tooltips.html">单独页面</a>看这个例子。</p>

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

<pre class="brush: css">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;
}</pre>

<h4 id="输出_3" style="line-height: 18px;">输出</h4>

<p>{{ EmbedLiveSample('Tooltips', 450, 120) }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>双冒号.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>最初版本,使用单冒号</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.selectors.after")}}</p>

<h2 id="相关链接">相关链接</h2>

<p>{{ Cssxref("::before") }}, {{ cssxref("content") }}</p>

<h3 id="高级用法">高级用法</h3>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle">getComputedStyle</a></p>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/getPropertyValue">getPropertyValue</a></p>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty">setProperty</a></p>