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
Share your thoughts in the comments
Please Login to comment...