::after (:after)

  • 版本网址缩略名: CSS/::after
  • 版本标题: ::after (:after)
  • 版本 id: 342153
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论

修订内容

{{ CSSRef() }}

概述

CSS伪元素:after用来匹配已选中元素的一个虚拟的最后子元素. . 通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容.这个虚拟元素默认是内联元素.

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

语法

element:after  { style properties }  /* CSS2 语法 */

element::after { style properties }  /* CSS3 语法 */

::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的.浏览器同时也都支持CSS2中引入的表示法:after.

注: IE8仅支持:after.

例子

.boringtext:after {
   content:    " Thank you for reading all this!"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}

规范

Specification Status Comment
{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }} {{ Spec2('CSS2.1') }} 双冒号.
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }} {{ Spec2('CSS2.1') }} 最初版本,使用单冒号

浏览器兼容性

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:after support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.0") }} 8.0 {{ CompatOpera("4") }} 4.0
::after support {{ CompatVersionUnknown() }} 1.5 9.0 {{ CompatOpera("7") }} 4.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:after support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
::after support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

相关链接

{{ Cssxref(":before") }}, {{ cssxref("content") }}

修订版来源

<div>
  {{ CSSRef() }}</div>
<h2 id=".E6.A6.82.E8.BF.B0">概述</h2>
<p>CSS<a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a><code>:after</code>用来匹配已选中元素的一个虚拟的最后子元素. . 通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容.这个虚拟元素默认是内联元素.</p>
<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=".E8.AF.AD.E6.B3.95">语法</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="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>和伪元素的.浏览器同时也都支持CSS2中引入的表示法<code>:after</code>.</p>
<div class="note">
  <strong>注:</strong> IE8仅支持<code>:after</code>.</div>
<h2 id=".E4.BE.8B.E5.AD.90">例子</h2>
<pre class="brush: css">.boringtext:after {
   content:    " Thank you for reading all this!"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}</pre>
<h2 id=".E8.A7.84.E8.8C.83">规范</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=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td><code>:after</code> support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>8.0</td>
        <td>{{ CompatOpera("4") }}</td>
        <td>4.0</td>
      </tr>
      <tr>
        <td><code>::after</code> support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>1.5</td>
        <td>9.0</td>
        <td>{{ CompatOpera("7") }}</td>
        <td>4.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td><code>:after</code> support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>::after</code> support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p> </p>
<h2 id=".E7.9B.B8.E5.85.B3.E9.93.BE.E6.8E.A5">相关链接</h2>
<p>{{ Cssxref(":before") }}, {{ cssxref("content") }}</p>
恢复到这个版本