::after (:after) CSS 伪元素 ::after 用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 尝试一下 </div></section><section aria-labelledby="语法"><h2 id="语法"><a href="#语法">语法</a></h2><div class="section-content"><div class="code-example"><p class="example-header"><span class="language-name">css</span></p><pre class="brush: css notranslate" data-signature="2v27FBp6FUQ1TgHbswd/8sWfNJzwndX2CD7X2/xtZqo="><code><span class="token selector">::after</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <p><strong>备注:</strong> CSS 引入 <code>::after</code> 表示法(两个冒号)是用来区分<a href="/zh-CN/docs/Web/CSS/Pseudo-classes">伪类</a>和<a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a>的。同时为了向后兼容,浏览器也支持前文介绍的 <code>:after</code>。</p> </div></div></section><section aria-labelledby="示例"><h2 id="示例"><a href="#示例">示例</a></h2><div class="section-content"/></section><section aria-labelledby="简单用法"><h3 id="简单用法"><a href="#简单用法">简单用法</a></h3><div class="section-content"><p>让我们创建两个类:一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。</p> <div class="code-example"><p class="example-header"><span class="language-name">html</span></p><pre class="brush: html notranslate" data-signature="MxE/Bv06OYsNbzy4XxCY3PnntZSYT44sOh2fifYBc9E="><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boring-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是些无聊的文字<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是不无聊也不有趣的文字<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exciting-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 在 MDN 上做贡献简单又轻松。按右上角的编辑按钮添加新示例或改进旧示例! <div class="code-example"><p class="example-header"><span class="language-name">css</span></p><pre class="brush: css notranslate" data-signature="y8VibQNO0yRFBNqvnQtnGoDwjSVGcKX3EFJMeRPsfro="><code><span class="token selector">.exciting-text::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"<- 让人兴兴兴奋!"</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token selector">.boring-text::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"<- 无聊!"</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <h4 id="结果">结果</h4><div class="code-example" id="sect2"><p class="example-header"/><iframe class="sample-code-frame" title="简单用法 sample" id="frame_简单用法" width="500" height="170" src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/::after/runner.html?id=%E7%AE%80%E5%8D%95%E7%94%A8%E6%B3%95" loading="lazy"/></div></div></section><section aria-labelledby="装饰用法"><h3 id="装饰用法"><a href="#装饰用法">装饰用法</a></h3><div class="section-content"><p>我们几乎可以用想要的任何方法给 <a href="/zh-CN/docs/Web/CSS/content"><code>content</code></a> 属性里的文字和图片的加上样式。</p> <div class="code-example"><p class="example-header"><span class="language-name">html</span></p><pre class="brush: html notranslate" data-signature="GpuIewDgmf84oNGRTAtjShoXDtq3F5Kz4nU6OMZoY68="><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ribbon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Notice where the orange box is.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <div class="code-example"><p class="example-header"><span class="language-name">css</span></p><pre class="brush: css notranslate" data-signature="8HptA00La+b1VLhILs4YoLuvvzJZLUgxqZuTLU4szBg="><code><span class="token selector">.ribbon</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #5bc8f7<span class="token punctuation">;</span> <span class="token selector">.ribbon::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Look at this orange box."</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ffba10<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> dotted<span class="token punctuation">;</span> <h4 id="结果_2">结果</h4><div class="code-example" id="sect3"><p class="example-header"/><iframe class="sample-code-frame" title="装饰用法 sample" id="frame_装饰用法" width="450" height="60" src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/::after/runner.html?id=%E8%A3%85%E9%A5%B0%E7%94%A8%E6%B3%95" loading="lazy"/></div></div></section><section aria-labelledby="提示用法"><h3 id="提示用法"><a href="#提示用法">提示用法</a></h3><div class="section-content"><p>接下来的示例展示了用<code>::after</code><a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a>,<a href="/zh-CN/docs/Web/CSS/attr"><code>attr()</code></a>CSS 表达式和一个<a href="/zh-CN/docs/HTML/Global_attributes#attr-data-*">自定义数据属性</a> <code>data-descr</code> 创建一个纯 CSS,词汇表提示工具。在<a href="/files/4591/css-only_tooltips.html" class="page-not-created" title="This is a link to an unwritten page">单独页面</a>看这个例子。</p> <div class="code-example"><p class="example-header"><span class="language-name">html</span></p><pre class="brush: html notranslate" data-signature="0wIAcQZr1KSQmdrruZoLJ9K7rfypf1DwvUHyksHql1I="><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 这是上面代码的实现<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 我们有一些 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">data-descr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collection of words and punctuation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文字<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> 有一些 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">data-descr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small popups which also hide again<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>。<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 把鼠标放上去<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">data-descr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>not to be taken literally<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>看看<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>。 <div class="code-example"><p class="example-header"><span class="language-name">css</span></p><pre class="brush: css notranslate" data-signature="EfbaYksKms3Om9FNWfPlAsO0KSdVnSzENKn91kH8j7M="><code><span class="token selector">span[data-descr]</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #00f<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> help<span class="token punctuation">;</span> <span class="token selector">span[data-descr]:hover::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-descr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px #aaaaaa solid<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ffffcc<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000000<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>