::before
is a generated content element that represents a styleable abstract first child of the respective element.
The content inserted using ::before
is inserted before other content inside the element and is displayed inline by default. The value of the content is specified using the content
property.
For example, suppose you have a blockquote with some text. You can use ::before
to insert some fancy quotation marks before the actual text. The quotation marks will be displayed on the page but will not be added to the blockquote in the DOM.
<blockquote> Your present circumstances don't determine where you can go; they merely determine where you start.—Nido Qubein </blockquote>
The following snippet will add a couple of fancy quotation marks to the blockquote using ::before
. The quotation marks will be added inside the blockquote, before the text of the quote, and inline with it.
blockquote::before { content: "\201C"; /* style the quote */ color: deepPink; font-size: 3em; position: relative; top: 20px; }
The quote is defined inside the content
property by escaping its Unicode value. This is how glyphs are usually represented and added via CSS.
The result of the above code is the following:
View this demo on the Codrops PlaygroundBecause the content inserted using a pseudo-element is not inserted into the DOM, it would normally not be possible to see and inspect the inserted content using a browser’s dev tools. However, Chrome 32+ and Firebug for Firefox allow you to see the pseudo-element’s position in the DOM, and by selecting it you can view the styles associated with it in the CSS panel. Inspecting the above demo in Chrome’s dev tools shows the following result:
![inspecting-before](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/12/inspecting-before.png?x72856)
::before
pseudo-element from the above example in the Chrome dev tools.
The above demo also shows that the content added with ::before
is positioned inline with and before the rest of the content inside the blockquote.
Since ::before
content is inserted before other content inside an element, this also means that the pseudo-element will be stacked beneath other elements that come after it in the source tree.
A pseudo-element can be used to insert almost any kind of content, including characters (as above), strings of text, and images. For example, the following are all valid ::before
declarations with valid content:
.element::before { content: url(path/to/image.png); /* an image, for example, an icon */ } .element::before { content: "Note: "; /* a string */ } .element::before { content: "\201C"; /* also counts as a string. Escaping the Unicode renders it as a character */ }
Images inserted using pseudo-elements cannot be resized. They are inserted as is, so you will have to size your image before you use it.
The following snippet styles paragraphs of text with a class .note
. Using the ::before
pseudo-element, each of these paragraphs will have the string “Note: ” inserted to it. All you have to do in this case is just give any paragraph of text that counts as a note the .note
class, and using CSS, the paragraph will automatically get a “Note: ” prefix added to it.
p.note { font-style: italic; color: grey; } p.note::before { content: "Note: "; color: red; }
You can see the live demo for this example in the live demo section below.
The content of ::before
can also be a counter
. A counter comes in the form of a function counter()
or counters()
and is used to style lists. You can read more about styling lists with counters in this article by Roger Johansson.
The content of ::before
can even be left empty. Empty pseudo-elements are useful for clearing floats in an element. For example, the micro clearfix hack by Nicolas Gallagher uses ::before
and ::after
to clear the floats inside float containers. You can read more about clearing floats and how the hack works in the float
entry.
The pseudo-element ::before
can also be styled just like any other content—it can be floated, positioned, and even animated. (Animating pseudo-elements is not possible in all browsers. See the browser support section below for more information.)
The ability to style pseudo-elements as if they were real elements on the page led to using them mostly for “cosmetic” purposes. Pseudo-elements are heavily used to created geometric shapes in CSS, among many other use cases. A demonstration of that can be seen in the following demo. An eight-point star can be created using an element and its pseudo-element. The first four points are created from the element itself made into a square. Then, the element’s pseudo-element is styled to get the same height and width as its parent, it is positioned absolutely on top of its parent, and then rotated by 45 degrees, forming an eight-point star.
/* The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo. By removing the opacity values, you can see a fully opaque eight-point star */ .element { width: 250px; height: 250px; background-color: #009966; opacity: .8; position: relative; margin: 100px auto; } .element:before { content: ""; position: absolute; display: block; width: 250px; height: 250px; background-color: #009966; opacity: .8; transform: rotateZ(45deg); }
Since the pseudo-element is used as a cosmetic element only, its content can be left empty.
View this demo on the Codrops Playground
This demo can also be created similarly using the ::after
pseudo-element.
Trivia & Notes
Different notations: (:) and (::)
You will most likely come across (or have come across) the notation :before
which uses one colon instead of two.
In CSS1 and CSS2, pseudo-elements were defined to start with one colon (:), just like pseudo-classes (for example :hover
). In CSS3, the double colon notation (::) was introduced for pseudo-elements in order to differentiate them from pseudo-classes.
/* old CSS2 syntax */ .element:before { /* content and styles here */ } /* new CSS3 syntax */ .element::before { /* content and styles here */ }
All browsers that support the two-colon notation also support the one-colon notation. Internet Explorer 8, however, does not support the two-colon notation. So, unless you need to support Internet Explorer 8, you can use the two-colon notation without having to worry about browser support.
In all the demos in this entry, the one-colon syntax is used to provide wider browser support for readers viewing the demos in IE8.
Accessibility
Content added using pseudo-elements is not inserted into the DOM—it is only visually displayed. Hence, screen readers won’t be able to access and read the content generated using pseudo-elements. So, it is recommended that you don’t use pseudo-elements to insert vital content into a page (such as footer notes that are relevant to the article, for example).
Pseudo-elements are mostly used to insert and style cosmetic content, and should not be relied on to insert content that is relevant to the meaning and completeness of the content on the page.
Also, since the content inserted using pseudo-elements is not inserted into the DOM, this means that you cannot attach any event handlers to it using JavaScript.
Examples
Pseudo-elements, including ::before
, can be used to do a lot of things and create a lot of effects. In addition to the examples above, the following articles contain numerous examples and use cases for pseudo-elements that we recommend you have a closer look at.
Browser Support
The one-colon notation :before
is supported in Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.
The two-colon ::before
syntax is supported in all those browsers, but in Internet Explorer it is supported from version 9 up.
Animating pseudo-elements is supported in all newer versions of modern browsers. Chrome supports CSS transitions on generated content from 26 on. Safari 6 and below do not support transitions or animations on pseudo elements.
Notes
Internet Explorer does not support using z-index
on pseudo-elements.