::before (:before)

  • Revision slug: CSS/:before
  • Revision title: :before | ::before
  • Revision id: 6471
  • Created:
  • Creator: Brettz9
  • Is current revision? No
  • Comment 1 words added, 1 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.1", "Versions of Firefox prior to Firefox 3.1 only implemented the CSS 2.0 version of :before. Not allowed were position, float, list-style-* and some display properies. Firefox 3.1 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 */

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 :after introduced in CSS 2. There is no difference in practice.

Examples

Usage Example

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«.

Notes

Although the positioning fixes in 3.1 do not allow content to be generated as a separate previous sibling (as per the CSS spec stating "The :before and :after pseudo-elements elements interact with other boxes...as if they were real elements inserted just inside their associated element."), they can be used to provide a slight improvement on tableless layouts (e.g., to achieve centering) in that, as long as the content to be centered is wrapped in a further child, a column before and after the content can be introduced without adding a previous or following sibling (i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after). (And always remember to add a width to a float, since, otherwise, it will not float!)

<style type="text/css">

#floatme {float:left; width:50%;}

.example:before {
  content: "Floated Before"; /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
  float: left;
  width:25%
}
.example:after {
  content: "Floated After";
  float: right;
  width:25%
}

/* For styling */
.example:before, .example:after, .first {
  background: yellow;
  color: red;
}


</style>
<div class="example">
<span id="floatme">"Floated Before" should be generated on the left of the 
viewport and not allow overflow in this line to flow under it. Likewise 
should "Floated After" appear on the right of the viewport and not allow this 
line to flow under it.</span>
</div>

 

Specifications

See Also

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

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
Firefox 1.0
Safari 1.0
Opera 7.0  (CSS2 syntax :before since 4.0)

See Also

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

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">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.1", "Versions of Firefox prior to Firefox 3.1 only implemented the CSS 2.0 version of :before. Not allowed were position, float, list-style-* and some display properies. Firefox 3.1 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 */
</pre>
<p>The <strong>::before</strong> notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation <strong>:after</strong> introduced in CSS 2. <em>There is no difference in practice</em>.</p>
<h3 name="Examples">Examples</h3>
<h4>Usage Example</h4>
<pre class="brush: css">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>Notes</h3>
<p>Although the positioning fixes in 3.1 do not allow content to be generated as a separate previous sibling (as per the <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">CSS spec</a> stating "The :before and :after pseudo-elements elements interact with other boxes...as if they were real elements inserted just inside their associated element."), they can be used to provide a slight improvement on tableless layouts (e.g., to achieve centering) in that, as long as the content to be centered is wrapped in a further child, a column before and after the content can be introduced without adding a previous or following sibling (i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty &lt;div/&gt; before and after). (And always remember to add a width to a float, since, otherwise, it will not float!)</p>
<pre class="brush: html">&lt;style type="text/css"&gt;

#floatme {float:left; width:50%;}

.example:before {
  content: "Floated Before"; /* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
  float: left;
  width:25%
}
.example:after {
  content: "Floated After";
  float: right;
  width:25%
}

/* For styling */
.example:before, .example:after, .first {
  background: yellow;
  color: red;
}


&lt;/style&gt;
&lt;div class="example"&gt;
&lt;span id="floatme"&gt;"Floated Before" should be generated on the left of the 
viewport and not allow overflow in this line to flow under it. Likewise 
should "Floated After" appear on the right of the viewport and not allow this 
line to flow under it.&lt;/span&gt;
&lt;/div&gt;
</pre>
<p> </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>See Also</h3>
<ul> <li>{{ Cssxref(":after") }}</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>n/a</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>7.0  (CSS2 syntax <code>:before</code> since 4.0)</td> </tr> </tbody>
</table>
<h3 name="Examples">See Also</h3>
<ul> <li>{{ Cssxref(":after") }}</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/:before", "pl": "pl/CSS/:before", "es": "es/CSS/before" } ) }}</p>
Revert to this revision