::after (:after)

  • Revision slug: CSS/:after
  • Revision title: :after | ::after
  • Revision id: 6452
  • Created:
  • Creator: tregagnon
  • Is current revision? No
  • Comment Corrected compatibility table; 2 words added, 1 words removed

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
CSS 2.1 Generated Content {{ Spec2('CSS2.1') }}  
CSS 2.1 Selectors {{ Spec2('CSS2.1') }}  
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }}  

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 style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/generate.html" title="http://www.w3.org/TR/CSS21/generate.html">CSS 2.1 Generated Content</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#before-and-after" title="http://www.w3.org/TR/CSS21/selector.html#before-and-after">CSS 2.1 Selectors</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> <tr> <td><a class="external" href="http://dev.w3.org/csswg/selectors3/" title="http://dev.w3.org/csswg/selectors3/">CSS Selectors Level 3</a></td> <td>{{ Spec2('CSS3 Selectors') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</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 <a class=" external" href="http://msdn.microsoft.com/en-us/library/ie/cc304076%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/cc304076%28v=vs.85%29.aspx"></a></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>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>
<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