Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document.
The content
attribute is required for pseudo-elements to render; however, the attribute can have an empty value (e.g. content: ""
).
div::after {
content: 'after';
color: red;
border: 1px solid red;
}
div {
color: black;
border: 1px solid black;
padding: 1px;
}
div::before {
content: 'before';
color: green;
border: 1px solid green;
}