CSS ::before selector

The ::before selector is a CSS pseudo-element used to insert content before the content of an element. It is similar to the ::after selector. This selector creates a pseudo-element that represents the first child of the selected element and is generally used for adding decorative content using the content property. By default, the ::before pseudo-element is inline.

Syntax:

::before{
    content:
}

Usage Example

The following example demonstrates the functionality of the ::before selector by adding decorative content before paragraph elements.

Example: The below HTML/CSS code shows the functionality of ::before selector.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        p::before {
            content: " - Remember this";
            background-color: blue;
        }
    </style>
</head>

<body>
    <h3>Before Selector</h3>
    <p>User ID: @dmor1</p>
    <p>Name: dharam</p>

</body>

</html>

Output:

The ::before selector is a powerful tool for adding decorative content before the main content of an element. By leveraging the content property, developers can enhance the visual appeal and functionality of their web pages. This selector is widely supported across all major browsers, making it a reliable choice for web development.

Supported Browsers:

Google Chrome 1.0
Edge 12.0
Firefox 1.5
Safari 4.0
Opera 7.0

Note: Opera 4-6 supports with single-colon.(::before).

Tags:

#CSS-Selectors #CSS #Web Technologies

CSS ::after Selector

CSS :checked Selector

CSS ::before selector

Usage Example

Contact Us