Revision 6479 of ::before (:before)

  • Revision slug: CSS/:before
  • Revision title: :before | ::before
  • Revision id: 6479
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 6 words added, 357 words removed

Revision Content

{{ CSSRef() }}

Summary

Creates a pseudo-element that is the first child of the element matched. Often 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 :before. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. (Note this is independent from the :: notation issue mentioned below.)") }}

Syntax

element:before  { style properties }  /* CSS2 syntax */

element::before { style properties }  /* CSS3 syntax, not supported by IE8 */

The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.

Note:  Microsoft Internet Explorer 8 supports the :before notation only.

Examples

q:before { content: "»" }
q:after { content: '«' }

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

Result:    »Some quotes«, he said, »are better than none«.

Specifications

Browser compatibility

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

See Also

{{ Cssxref(":after") }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>Creates a pseudo-element that is the first child of the element matched. Often 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 :before. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions. (Note this is independent from the :: notation issue mentioned below.)") }}</p>
<h3>Syntax</h3>
<pre>element:before  { <em>style properties</em> }  /* CSS2 syntax */

element::before { <em>style properties</em> }  /* CSS3 syntax, not supported by IE8 */
</pre>
<p>The<code> ::before </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> :before </code>introduced in CSS 2.</p>
<div class="note"><strong>Note:</strong>  Microsoft Internet Explorer 8 supports the<code> :before </code>notation only.</div>
<h3 name="Examples">Examples</h3>
<pre>q:before { content: "»" }
q:after { content: '«' }

&lt;q&gt;Some quotes&lt;/q&gt;, he said, &lt;q&gt;are better than none&lt;/q&gt;.
</pre>
<p>Result:    »Some quotes«, he said, »are better than none«.</p>
<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>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>:before</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:before<br> </code></td> </tr> <tr> <td><strong>1.0</strong> (1.5)</td> <td><code>:before | ::before</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>before | ::before</code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0</td> <td><code>:before<br> </code></td> </tr> <tr> <td><strong>7.0</strong></td> <td><code>:before | ::before</code></td> </tr> </tbody>
</table>
<h3>See Also</h3>
<p>{{ Cssxref(":after") }}</p>
<p>{{ languages( { "fr": "fr/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}</p>
Revert to this revision