Flash cards
Review the key moves
What is the main idea behind CSS Pseudo-elements for Content?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
h3::___ {Put the learning moves in the order that makes the concept easiest to apply.
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);
}Live preview
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);
}Live preview
The CSS ::marker Pseudo-element
The ::marker pseudo-element is used to style the list item markers.
Example
::marker {
color: red;
font-size: 23px;
}Live preview
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;
}Live preview
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;
}Live preview