::before (:before)

  • Revision slug: Web/CSS/::before
  • Revision title: ::before (:before)
  • Revision id: 480579
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment clean-up samples

Revision Content

{{ CSSRef() }}

Summary

::before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the {{ cssxref("content") }} property. This element is inline by default.

Syntax

element:before  { style properties }  /* CSS2 obsolete syntax (only needed to support outdated browsers) */

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 :before introduced in CSS 2.

Examples

Adding quotation marks

One simple example of using psuedo-elements is to provide quotation marks. Here we use both ::before and ::before to insert quotation characters.

JavaScript

q::before { 
  content: "»";
  color: blue;
}
q::after { 
  content: '«';
  color: pink;
}

HTML

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

And this is the result:

{{ EmbedLiveSample('Quotation', '500', '50', '') }}

To-do list

In this example we will create a simple todo list using psuedo-elements. This method can often be used to add small touches to the UI and improve user experience.

JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

CSS

li {
  list-style-type: none;
  position: relative;
  margin: 1px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: grey;
}

li.done {
  background: #CCFF99;
}

li.done::before {
    content: '';
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}

Here is the above code example running live. Note that there are no icons used, and the checkmark as actually the ::before that has been styled in CSS. Go ahead and get some stuff done.

{{ EmbedLiveSample('TODO_List', '400', '300', '') }}

Notes

Although the positioning fixes in Firefox 3.5 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>

The output looks like this:

{{EmbedLiveSample("Notes")}}

Specifications

Specification Status Comment
{{ Specname("CSS3 Transitions", "#animatable-properties", "") }} {{ Spec2("CSS3 Transitions")}} Allows transitions on properties defined on pseudo-elements.
{{ Specname("CSS3 Animations", "", "") }} {{ Spec2("CSS3 Animations")}} Allows animations on properties defined on pseudo-elements.
{{ SpecName('CSS3 Selectors', '#gen-content', '::before') }} {{ Spec2('CSS3 Selectors') }} Introduces the two-colon syntax.
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::before') }} {{ Spec2('CSS2.1') }} Initial definition, using the one-colon syntax

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:before support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.0") }} [1] 8.0 {{ CompatOpera("4") }} 4.0
::before support {{ CompatVersionUnknown() }} 1.5 [1] 9.0 {{ CompatOpera("7") }} 4.0
Support of animations and transitions 26 {{ CompatGeckoDesktop("2.0") }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:before support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
::before support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Support of animations and transitions 26 {{ CompatGeckoMobile("4.0") }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}

[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :before. Not allowed were {{cssxref("position")}}, {{cssxref("float")}}, list-style-* and some display properties. Firefox 3.5 removed those restrictions.

See also

  • {{ Cssxref(":after") }}, {{ cssxref("content") }}

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><code>::before</code> creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the {{ cssxref("content") }} property. This element is inline by default.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
element:before  { <em>style properties</em> }  /* CSS2 obsolete syntax (only needed to support outdated browsers) */

element::before { <em>style properties</em> }  /* CSS3 syntax */
</pre>
<p>The <code>::before</code> notation was introduced in CSS 3 in order to establish a discrimination between <a href="/en-US/docs/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-classes</a> and <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>. Browsers also accept the notation <code>:before</code> introduced in CSS 2.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Quotation">Adding quotation marks</h3>
<p>One simple example of using psuedo-elements is to provide quotation marks. Here we use both <code>::before </code>and <code>::before</code> to insert quotation characters.</p>
<h4>JavaScript</h4>
<pre class="brush:css">
q::before { 
  content: "»";
  color: blue;
}
q::after { 
  content: '«';
  color: pink;
}</pre>
<h4>HTML</h4>
<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>And this is the result:</p>
<p>{{ EmbedLiveSample('Quotation', '500', '50', '') }}</p>
<h3 id="TODO_List">To-do list</h3>
<p>In this example we will create a simple todo list using psuedo-elements. This method can often be used to add small touches to the UI and improve user experience.</p>
<h4>JavaScript</h4>
<pre class="brush: js">
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);
</pre>
<h4>HTML</h4>
<pre class="brush: html">
&lt;ul&gt;
  &lt;li&gt;Buy milk&lt;/li&gt;
&nbsp; &lt;li&gt;Take the dog for a walk&lt;/li&gt;
&nbsp; &lt;li&gt;Exercise&lt;/li&gt;
&nbsp; &lt;li&gt;Write code&lt;/li&gt;
&nbsp; &lt;li&gt;Play music&lt;/li&gt;
&nbsp; &lt;li&gt;Relax&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h4>CSS</h4>
<pre class="brush: css">
li {
&nbsp; list-style-type: none;
&nbsp; position: relative;
&nbsp; margin: 1px;
&nbsp; padding: 0.5em 0.5em 0.5em 2em;
&nbsp; background: grey;
}

li.done {
&nbsp; background: #CCFF99;
}

li.done::before {
&nbsp;&nbsp;&nbsp; content: '';
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; border-color: #009933;
&nbsp;&nbsp;&nbsp; border-style: solid;
&nbsp;&nbsp;&nbsp; border-width: 0 0.3em 0.25em 0;
&nbsp;&nbsp;&nbsp; height: 1em;
&nbsp;&nbsp;&nbsp; top: 1.3em;
&nbsp;&nbsp;&nbsp; left: 0.6em;
&nbsp;&nbsp;&nbsp; margin-top: -1em;
&nbsp;&nbsp;&nbsp; transform: rotate(45deg);
&nbsp;&nbsp;&nbsp; width: 0.5em;
}
</pre>
<p>Here is the above code example running live. Note that there are no icons used, and the checkmark as actually the <code>::before</code> that has been styled in CSS. Go ahead and get some stuff done.</p>
<p>{{ EmbedLiveSample('TODO_List', '400', '300', '') }}</p>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Although the positioning fixes in Firefox 3.5 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)&nbsp;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 name="Specifications">The output looks like this:</p>
<p name="Specifications">{{EmbedLiveSample("Notes")}}</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ Specname("CSS3 Transitions", "#animatable-properties", "") }}</td>
      <td>{{ Spec2("CSS3 Transitions")}}</td>
      <td>Allows transitions on properties defined on pseudo-elements.</td>
    </tr>
    <tr>
      <td>{{ Specname("CSS3 Animations", "", "") }}</td>
      <td>{{ Spec2("CSS3 Animations")}}</td>
      <td>Allows animations on properties defined on pseudo-elements.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#gen-content', '::before') }}</td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>Introduces the two-colon syntax.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::before') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Initial definition, using the one-colon syntax</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td><code>:before</code> support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }} [1]</td>
        <td>8.0</td>
        <td>{{ CompatOpera("4") }}</td>
        <td>4.0</td>
      </tr>
      <tr>
        <td><code>::before</code> support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>1.5 [1]</td>
        <td>9.0</td>
        <td>{{ CompatOpera("7") }}</td>
        <td>4.0</td>
      </tr>
      <tr>
        <td>Support of animations and transitions</td>
        <td>26</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td><code>:before</code> support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>::before</code> support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Support of animations and transitions</td>
        <td>26</td>
        <td>{{ CompatGeckoMobile("4.0") }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Firefox prior to version 3.5 only implemented the CSS&nbsp;2.0 version of :before. Not allowed were {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> and some display properties. Firefox 3.5 removed those restrictions.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ Cssxref(":after") }}, {{ cssxref("content") }}</li>
</ul>
Revert to this revision