::before CSS Pseudo Element

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

HTML

<ul>

   <li>Adelaide</li>

   <li>Melbourne</li>

   <li>Sydney</li>

   <li>Brisbane</li>

   <li>Perth</li>

</ul>

CSS

li::before {

   content: "→ ";

} 

li {

   list-style: none;

   color: blue;

}

Result

Editor

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.