CSS ::before selector
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 4.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 3.1
- Opera 7.0
Note: Internet Explorer 8 and Opera 4-6 supports with single-colon.(::before).