::before

::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 Playground

Because 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:

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.