::after (:after)

  • Revision slug: CSS/:after
  • Revision title: :after | ::after
  • Revision id: 6421
  • Created:
  • Creator: Miken32
  • Is current revision? No
  • Comment 15 words added

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.

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

(Sample Compatibility Chart)

Browser Lowest Version
Internet Explorer no
Firefox 1.5?
Netscape no
Opera 7?

{{ 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>
<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>
<p>(Sample Compatibility Chart)</p>
<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.5?</td> </tr> <tr> <td>Netscape</td> <td>no</td> </tr> <tr> <td>Opera</td> <td>7?</td> </tr> </tbody>
</table>
<p>{{ languages( { "fr": "fr/CSS/:after", "pl": "pl/CSS/:after", "es": "es/CSS/after" } ) }}</p>
Revert to this revision