CSS Content Pseudo-elements
Content Pseudo-elements
Content pseudo-elements 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
Insert an image before the content of each <h3> element:
h3::before
{
content: url(smiley.gif);
}
Try it Yourself »
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
Insert an image after the content of each <h3> element:
h3::after
{
content: url(smiley.gif);
}
Try it Yourself »
The CSS ::marker Pseudo-element
The ::marker pseudo-element
is used to style the list item markers.
Example
Style the markers of list items:
::marker {
color: red;
font-size: 23px;
}
Try it Yourself »
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
Style the user-selected text with a red color, and a yellow background:
::selection {
color: red;
background: yellow;
}
Try it Yourself »
The CSS ::backdrop Pseudo-element
The ::backdrop pseudo-element
is used to style the viewbox behind a dialog box or popover element.
Example
Style the viewbox behind a dialog box:
dialog::backdrop {
background-color: lightgreen;
}
Try it Yourself »
CSS Pseudo-elements Reference
For a complete list of all CSS Pseudo-elements, visit our CSS Pseudo-elements Reference.
