::before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.
The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
Examples
Adding quotation marks
One simple example of using psuedo-elements is to provide quotation marks. Here we use both ::before and ::before to insert quotation characters.CSS
1
q::before {
2
content: "»";
3
color: blue;
4
}
5
q::after {
6
content: '«';
7
color: red;
8
}
HTML
1
<q>Some quotes</q>, he said, <q>are better than none</q>.
To-do list
In this example we will create a simple todo list using psuedo-elements. This method can often be used to add small touches to the UI and improve user experience.JavaScript
