Revision 6424 of ::after (:after)

  • Revision slug: CSS/:after
  • Revision title: :after | ::after
  • Revision id: 6424
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment 5 words removed

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 implement the CSS 2.0 version of :after }}, and only allowed display:block and display:inline.  Firefox 3.1 removes those restrictions.")

Syntax

element:after { style properties }

Examples

Usage Example

q:after { content: '"'; }

...where...

<q>Some quotes,</q> he said, <q>are better than none.</q>

...should look like...

Some quotes," he said, are better than none."

Specifications

See Also

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

Browser compatibility

Browser Lowest Version
Internet Explorer no
Firefox 1.0
Safari 1.0
Opera 5.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 implement the CSS 2.0 version of <code>:<span style="font-family: Verdana,Tahoma,sans-serif;">after }}</span></code></code>, and only allowed <code>display:block</code> and <code>display:inline</code>.  Firefox 3.1 removes those restrictions.")</span></p>
<h3>Syntax</h3>
<pre>element:after { <em>style properties</em> }
</pre>
<h3 name="Examples">Examples</h3>
<h4>Usage Example</h4>
<pre class="brush: css">q:after { content: '"'; }
</pre>
<p>...where...</p>
<pre class="brush: html">&lt;q&gt;Some quotes,&lt;/q&gt; he said, &lt;q&gt;are better than none.&lt;/q&gt;
</pre>
<p>...should look like...</p>
<p>Some quotes," he said, are better than none."</p>
<h3>Specifications</h3>
<ul> <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</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>no</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>5.0</td> </tr> </tbody>
</table>
<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after" } ) }}</p>
Revert to this revision