CSS TutorialLesson 32Free preview
CSS Pseudo-elements
This lesson is part of CSS · All levels
Summary
Pseudo-elements make extra pieces of content on the element as if it were a separate element, and are written with two colon like before or after. Through the content property, we can add text, icons, or decorative boxes without touching the HTML. Other pseudo-elements like the first-letter and the first-line embellish the first letter or first line.
Key points
- Pseudo-element syntax uses two colon, for example Elements::before and Elements::after.
- The content property must be filled in so that the pseudo-element displays something.
- ::before placing content before the content of the element,::after after.
- ::first-letter and::first-line embellish the beginning of the text.
- Pseudo-elements can be given the full style of ordinary elements, including display, margin, and position.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.