--- 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"><p class="boring-text">这是些无聊的文字</p> <p>这是不无聊也不有趣的文字</p> <p class="exciting-text">在MDN上做贡献简单又轻松。 按右上角的编辑按钮添加新示例或改进旧示例!</p></pre> <pre class="brush: css">.exciting-text::after { content: "<- 让人兴兴兴奋!"; color: green; } .boring-text::after { content: "<- 无聊!"; 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"><span class="ribbon">Notice where the orange box is.</span></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"><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> </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>