CSSContent 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 thecontent property to specify the content to insert.
Example
Insert an image before the content of each <h3> element:
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 thecontent property to specify the content to insert.
Example
Insert an image after the content of each <h3> element:
content: url(smiley.gif);
}
The CSS ::marker Pseudo-element
The::marker pseudo-element is used to style the list item markers.
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:
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
Style the viewbox behind a dialog box:
background-color: lightgreen;
}
CSS Pseudo-elements Reference
For a complete list of all CSS Pseudo-elements, visit ourCSS Pseudo-elements Reference.
