Pseudo-elements for Content
Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more.
The CSS ::before Pseudo-element
The ::before pseudo-element is used to insert some content before the content of a specified element.
Use the content property to specify the content to insert.
Example
h3::before
{
content: url(smiley.gif);
}
The CSS ::after Pseudo-element
The ::after pseudo-element is used to insert some content after the content of a specified element.
Use the content property to specify the content to insert.
Example
h3::after
{
content: url(smiley.gif);
}
The CSS ::marker Pseudo-element
The ::marker pseudo-element is used to style the list item markers.
Example
::marker {
color: red;
font-size: 23px;
}
The CSS ::selection Pseudo-element
The ::selection pseudo-element is used to style the part of a text that is selected by a user.
Example
::selection {
color: red;
background: yellow;
}
The CSS ::backdrop Pseudo-element
The ::backdrop pseudo-element is used to style the viewbox behind a dialog box or popover element.
Example
dialog::backdrop {
background-color: lightgreen;
}
CSS Pseudo-elements Reference
Note: For a complete list of all CSS Pseudo-elements, visit our CSS Pseudo-elements Reference.
