Pseudo-element
A CSS pseudo-element is a selector construct that represents a conceptual part of an element or generated content for styling without a separate document element.
Tiny CSS Projects
A CSS pseudo-element is a selector feature that targets a specific conceptual part of an element.
- How it is used
- Targets conceptual parts of elements for details such as an accented first letter, appended punctuation, or a styled progress indicator.
- How deep it goes
- Explains selector syntax through CSS examples and a browser-specific workaround, while noting that pseudo-elements do not work on every HTML element.
- Examples
- Shows a crimson italic first letter, a colon after each description term, and matching progress-indicator styles for Firefox and Chrome.
- What you can do after
- Practice/perform targeted CSS styling by accenting a paragraph’s first letter or adding punctuation after description terms.
Web Design Playground, Second Edition
A CSS pseudo-element is a selector-generated construct that represents a stylable part of an element without requiring a separate HTML element.
- How it is used
- Adds generated visual content and styles to elements without adding separate HTML objects.
- How deep it goes
- Explains ::before, ::after, ::first-letter, content, hexadecimal characters, custom bullets, icons, and counters through examples.
- Examples
- Uses paragraph marks, custom list bullets, external-link icons, numbered lists, and a floating-container clearfix.
- What you can do after
- Apply it via CSS to create decorative characters, custom markers, link icons, and layout-clearing content.
Read how Web Design Playground, Second Edition explains pseudo-element →
Related concepts
- ::first-letter pseudo-elementincludes · The CSS ::first-letter pseudo-element represents the first typographic character of an element’s text for styling.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.