Open In App

CSS ::before selector

Improve
Improve
Like Article
Like
Save
Share
Report

The ::before selector CSS pseudo-element, is used to add the same content multiple times before the content of other elements. This selector is the same as ::after selector. It helps to create the pseudo-element that represents the first child of the selected element & is generally used for adding decorative content to an element using the content property. Its default value is inline.

Syntax:

::before{
    content:
}

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:

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). 


Last Updated : 04 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads