::before CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS ::before pseudo-element allows you to insert content before the content of an element. It is often used to add cosmetic content to an element, such as an icon, a border, or a drop shadow.

The ::before pseudo-element is created using the following syntax:

selector::before {
/* CSS properties */
}

The selector can be any CSS selector, such as a tag name, a class name, or an ID.

The ::before pseudo-element is inline by default, but it can be positioned using CSS properties such as position, top, left, and width.

Here is an example of how to use the ::before pseudo-element to add a bullet point before a list item:
li::before {
content: "•";
margin-right: 10px;
}

This will add a black bullet point before each list item.

The content property is used to specify the content to insert before the element. The content can be text, an image, or even generated content, such as a counter.

Here is an example of how to use the ::before pseudo-element to add a drop shadow to an element:
div::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}

This will add a black drop shadow to all div elements.

The ::before pseudo-element is a powerful tool that can be used to add a variety of effects to your web pages.

Syntax

element::before { content: "text" };

Example

<ul>
<li>Adelaide</li>
<li>Melbourne</li>
<li>Sydney</li>
<li>Brisbane</li>
<li>Perth</li>
</ul>
li::before {
content: "→ ";
}
li {
list-style: none;
color: blue;
}

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::before pseudo element.

Desktop
Edge Chrome Firefox Opera Safari
1211.574
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.13137

Last updated by CSSPortal on: 1st October 2023