::after (:after)

  • Revision slug: CSS/:after
  • Revision title: :after | ::after
  • Revision id: 6442
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes

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.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, not supported by IE8 */

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

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 8.0
:after
Firefox (Gecko) 1.0 (1.0) :after
1.0 (1.5) :after | ::after
Safari (WebKit) 1.0 (85) :after | ::after
Opera 4.0 :after
7.0 :after | ::after

See Also

{{ Cssxref(":before") }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>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.5", "Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. 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><h3>Syntax</h3>
<pre>element:after  { <em>style properties</em> }  /* CSS2 syntax */

element::after { <em>style properties</em> }  /* CSS3 syntax, not supported by IE8 */
</pre>
<p>The<code> ::after </code>notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes 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><h3>Examples</h3>
<pre>.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" rel="external nofollow" target="_blank" title="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3 Selectors </a></li>
</ul><h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>8.0<code> <br> </code></td> <td><code>:after</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:after<br> </code></td> </tr> <tr> <td><strong>1.0</strong> (1.5)</td> <td><code>:after | ::after</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> <td><code><span style="font-family: Verdana,Tahoma,sans-serif;"><span style="font-family: monospace;">:</span></span>after | ::after</code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0</td> <td><code>:after<br> </code></td> </tr> <tr> <td><strong>7.0</strong></td> <td><code>:after | ::after</code></td> </tr> </tbody>
</table>
<h3>See Also</h3>
<p>{{ Cssxref(":before") }}</p>
<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after", "pt": "pt/CSS/:after" } ) }}</p>
Revert to this revision