::after (:after)

  • Revision slug: CSS/::after
  • Revision title: ::after (:after)
  • Revision id: 296396
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

:after creates a pseudo-element that is the last child of the element matched. Typically used to add cosmetic content to an element, by using the {{ cssxref("content") }} CSS property. This element is inline by default.

{{ fx_minversion_note("3.5", "Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. Note this is independent from the colon notation issue mentioned below.") }}

Syntax

element:after  { style properties }  /* CSS2 syntax */

element::after { style properties }  /* CSS3 syntax */

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

Note:  Microsoft Internet Explorer 8 supports the :after notation only.

Examples

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

Specifications

Specification Status Comment
{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }} {{ Spec2('CSS2.1') }} Use the two-colon syntax.
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }} {{ Spec2('CSS2.1') }} Initial definition, using the one-colo syntax

Browser compatibility

{{ 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 Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:after support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
::after support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

See Also

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

{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p><code>:after </code>creates a <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">pseudo-element</a> that is the last child of the element matched. Typically used to add cosmetic content to an element, by using the {{ cssxref("content") }} CSS property. This element is inline by default.</p>
<p>{{ fx_minversion_note("3.5", "Firefox prior to version 3.5 only implemented the CSS 2.0 version of<code> :after</code>. Not allowed were<code> position, float, list-style-* </code>and some display properties. Firefox 3.5 removed those restrictions. Note this is independent from the colon notation issue mentioned below.") }}</p>
<h2 id="Syntax">Syntax</h2>
<pre>element:after  { <em>style properties</em> }  /* CSS2 syntax */

element::after { <em>style properties</em> }  /* CSS3 syntax */</pre>
<p>The<code> ::after </code>notation was introduced in CSS 3 in order to establish a discrimination between <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> and pseudo-elements. Browsers also accept the notation<code> :after </code>introduced in CSS 2.</p>
<div class="note">
  <strong>Note:</strong>  Microsoft Internet Explorer 8 supports the <code>:after</code> notation only.</div>
<h2 id="Examples">Examples</h2>
<pre>.boringtext:after {
   content:    " Thank you for reading all this!"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}</pre>
<h2 id="Specifications">Specifications</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>Use the two-colon syntax.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Initial definition, using the one-colo syntax</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <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>
    <tbody>
      <tr>
        <th>Feature</th>
        <th>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>
      </tr>
      <tr>
        <td><code>::after</code> support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p> </p>
<h2 id="See_Also">See Also</h2>
<p>{{ Cssxref(":before") }}, {{ cssxref("content") }}</p>
<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}</p>
Revert to this revision