::after (:after)

  • Revision slug: CSS/:after
  • Revision title: :after | ::after
  • Revision id: 6431
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment page display name changed to ':after ::after'

Revision Content

{{ CSSRef() }}

Summary

Creates a pseudo-element that is the last child of the element matched. Typically used to add cosmetic content to an element. This element is inline by default.

{{ fx_minversion_note("3.1", "Versions of Firefox prior to Firefox 3.1 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properies. Firefox 3.1 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. There is no difference in practice.

Examples

Usage Example

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

Specifications

See Also

  • {{ Cssxref(":before") }}

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
Firefox 1.0
Safari 1.0
Opera 7.0  (CSS2 syntax :after since 4.0)

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Creates a pseudo-element that is the last child of the element matched. Typically used to add cosmetic content to an element. This element is inline by default.</p>
<p>{{ fx_minversion_note("3.1", "Versions of Firefox prior to Firefox 3.1 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properies. Firefox 3.1 removed those restrictions. Note this is independent from the colon notation issue mentioned below.") }}</p>
<h3>Syntax</h3>
<pre>element:after { <em>style properties</em> } /* CSS2 syntax */
element::after { <em>style properties</em> } /* CSS3 syntax */
</pre>
<p>The <strong>::after</strong> notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation <strong>:after</strong> introduced in CSS 2. <em>There is no difference in practice</em>.</p>
<h3 name="Examples">Examples</h3>
<h4>Usage Example</h4>
<pre class="brush: css">.boringtext::after { 
   content:    " Thank you for reading all this!"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}
</pre>
<h3>Specifications</h3>
<ul> <li><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></li> <li><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></li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content" title="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3 Selectors </a></li>
</ul>
<h3>See Also</h3>
<ul> <li>{{ Cssxref(":before") }}</li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>n/a</td> </tr> <tr> <td>Firefox</td> <td>1.0</td> </tr> <tr> <td>Safari</td> <td>1.0</td> </tr> <tr> <td>Opera</td> <td>7.0  (CSS2 syntax <code>:after</code> since 4.0)</td> </tr> </tbody>
</table>
<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after" } ) }}</p>
Revert to this revision