::before CSS Pseudo Element


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.


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


li::before {
content: "→ ";
li {
list-style: none;
color: blue;


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023