Web/CSS/ before

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

/* Add a heart before links */
a::before {
  content: "♥";
}

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

Syntax

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

Note: CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.

Examples

Adding quotation marks

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

HTML

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

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Decorative example

We can style text or images in the content property almost any way we want.

HTML

<span class="ribbon">Notice where the orange box is.</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

To-do list

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

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: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

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;
}

JavaScript

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

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

Special characters

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

HTML

<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

CSS

li {
  padding:0.5em;
}

li[aria-current='step'] {
  font-weight:bold; 
}

li[aria-current='step']::after {
  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
  display: inline;
}

Specifications

Specification	Status	Comment
CSS Pseudo-Elements Level 4The definition of '::before' in that specification.	Working Draft	No significant changes to the previous specification.
CSS Animations Level 1	Working Draft	Allows animations on properties defined on pseudo-elements.
Selectors Level 3The definition of '::before' in that specification.	Recommendation	Introduces the two-colon syntax.
CSS Level 2 (Revision 1)The definition of '::before' in that specification.	Recommendation	Initial definition, using the one-colon syntax

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
::before	Chrome Full support 1 Full support 1 Full support 1 Alternate Name' Alternate Name' Uses the non-standard name: :before	Edge Full support 12 Full support 12 Full support 12 Alternate Name' Alternate Name' Uses the non-standard name: :before	Firefox Full support 1.5 Notes' Full support 1.5 Notes' Notes' Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none. Notes' Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties. Full support 1 Alternate Name' Alternate Name' Uses the non-standard name: :before	IE Full support 9 Full support 9 Full support 8 Alternate Name' Alternate Name' Uses the non-standard name: :before	Opera Full support 7 Full support 7 Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: :before	Safari Full support 4 Full support 4 Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: :before	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Alternate Name' Alternate Name' Uses the non-standard name: :before	Chrome Android Full support 18 Full support 18 Full support 18 Alternate Name' Alternate Name' Uses the non-standard name: :before	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none. Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: :before	Opera Android Full support 10.1 Full support 10.1 Full support 10.1 Alternate Name' Alternate Name' Uses the non-standard name: :before	Safari iOS Full support 5.1	Samsung Internet Android Full support 1.0 Full support 1.0 Full support 1.0 Alternate Name' Alternate Name' Uses the non-standard name: :before
Animation and transition support	Chrome Full support 26	Edge Full support 12	Firefox Full support 4	IE No support No	Opera Full support 15	Safari No support No	WebView Android Full support ≤37	Chrome Android Full support 26	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5

Legend

Full support  

Full support

No support  

No support

See implementation notes.'

See implementation notes.

Uses a non-standard name.'

Uses a non-standard name.

See also

• ::after
• content

::before (:before) by Mozilla Contributors is licensed under CC-BY-SA 2.5.