::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
<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 | |||||
12 | 1 | 1.5 | 7 | 4 |
Tablets / Mobile | |||||
18 | 4 | 10.1 | 3 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023