Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Pseudo-elements?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___::pseudo-element-name {3Order
Put the learning moves in the order that makes the concept easiest to apply.
Content Pseudo-elements
Text Pseudo-elements
CSS Pseudo-Elements
CSS Pseudo-Elements
A CSS pseudo-element is a keyword that can be added to a selector, to style a specific part of an element.
Some common use for pseudo-elements
- Style the first letter or first line, of an element
- Insert content before or after an element
- Style the markers of list items
- Style the user-selected portion of an element
- Style the viewbox behind a dialog box
Syntax
Pseudo-elements are denoted by a double colon (::) followed by the pseudo-element name:
selector::pseudo-element-name {
CSS properties
}Text Pseudo-elements
Text pseudo-elements style specific parts of text content:
- ::first-line - Style the first line of text
- ::first-letter - Style the first letter of text
Content Pseudo-elements
Content pseudo-elements insert or style generated content:
- ::before - Insert content before an element
- ::after - Insert content after an element
- ::marker - Style list item markers
- ::selection - Style user-selected text
- ::backdrop - Style dialog backdrop