Revision 983351 of Pseudo-elements

<div>{{ CSSRef() }}</div>

<h2 id="Summary">Summary</h2>

<p>Just like {{ Cssxref("pseudo-classes") }}, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the {{ Cssxref("::first-line") }} pseudo-element targets only&nbsp; the first line of an element specified by the selector.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
selector::pseudo-element {
  property: value;
}</pre>

<h2 id="All_pseudo-elements">All pseudo-elements</h2>

<ul>
 <li>{{ Cssxref("::after") }}</li>
 <li>{{ Cssxref("::before") }}</li>
 <li>{{ Cssxref("::first-letter") }}</li>
 <li>{{ Cssxref("::first-line") }}</li>
 <li>{{ Cssxref("::selection") }}</li>
 <li>{{ Cssxref("::backdrop") }}</li>
 <li>{{ Cssxref("::placeholder") }} {{experimental inline}}</li>
 <li>{{ Cssxref("::marker") }} {{experimental inline}}</li>
 <li>{{ Cssxref("::spelling-error") }} {{experimental inline}}</li>
 <li>{{ Cssxref("::grammar-error") }} {{experimental inline}}</li>
</ul>

<h2 id="Notes">Notes</h2>

<p>Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.</p>

<div class="note"><strong>Note:</strong> <code>::selection</code> always starts with double colons (::).</div>

<p class="note">You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>Lowest Version</th>
   <th>Support of</th>
  </tr>
  <tr>
   <td rowspan="2">Internet Explorer</td>
   <td>8.0</td>
   <td><code>:pseudo-element</code></td>
  </tr>
  <tr>
   <td>9.0</td>
   <td><code>:pseudo-element ::pseudo-element</code></td>
  </tr>
  <tr>
   <td rowspan="2">Firefox (Gecko)</td>
   <td>1.0 (1.0)</td>
   <td><code>:pseudo-element</code></td>
  </tr>
  <tr>
   <td>1.0 (1.5)</td>
   <td><code>:pseudo-element ::pseudo-element</code></td>
  </tr>
  <tr>
   <td rowspan="2">Opera</td>
   <td>4.0</td>
   <td><code>:pseudo-element</code></td>
  </tr>
  <tr>
   <td>7.0</td>
   <td><code>:pseudo-element ::pseudo-element</code></td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td>1.0 (85)</td>
   <td><code>:pseudo-element ::pseudo-element</code></td>
  </tr>
 </tbody>
</table>

<p>&nbsp;</p>