Understanding CSS Pseudo-Elements

What does the `::before` pseudo-element do in CSS?

• Inserts content after an element

• Inserts content before an element

• Changes the color of an element

• Adds a border to an element

Which of the following is a common pseudo-element in CSS?

• `::hover`

• `::after`

• `::click`

• `::focus`

How can you style the first letter of a paragraph using pseudo-elements?

• `p::first-letter { font-size: 2em; }`

• `p::first-line { font-size: 2em; }`

• `p::first-word { font-size: 2em; }`

• `p::first-char { font-size: 2em; }`

What is a key difference between pseudo-elements and classes in CSS?

• Pseudo-elements can be reused, while classes cannot

• Classes can be applied to multiple elements, while pseudo-elements target specific parts of an element

• Pseudo-elements are used for animations, while classes are not

• Classes are only for HTML, while pseudo-elements are for CSS

Which of the following is a valid use case for pseudo-elements?

• Adding a shadow to an element

• Styling the first line of a paragraph

• Changing the font of an entire document

• Creating a new HTML element

How would you use a pseudo-element to add a decorative icon before a list item?

• `li::icon { content: "🌟"; }`

• `li::before { content: "🌟"; }`

• `li::after { content: "🌟"; }`

• `li::first-icon { content: "🌟"; }`

Which pseudo-element would you use to style the first line of a paragraph?

• `::first-letter`

• `::first-word`

• `::first-line`

• `::first-char`

What is the correct syntax to use a pseudo-element in CSS?

• `element:pseudo-element`

• `element::pseudo-element`

• `element.pseudo-element`

• `element#pseudo-element`