CSS Pseudo-elements Cheat Sheet

Pseudo-elements like ::before and ::after allow you to insert generated content into the DOM without altering the HTML structure, enabling creative styling and layout enhancements.

Core Principles

Pseudo-elements target specific parts of an element, not the element itself, allowing for content generation or styling of sub-elements.
::before and ::after create pseudo-elements that are children of the element they are attached to, useful for decorative content or icons.
The `content` property is mandatory for ::before and ::after to display anything, accepting strings, URLs, or counters.
`position: fixed` combined with `inset: 0` and `margin: auto` centers an element both horizontally and vertically within the viewport.
The `z-index: -1` property places the element behind other content, making it suitable for background effects.
Using `font-family: monospace`, `opacity`, `background`, `color`, `padding`, and `border-radius` are standard CSS properties for styling text and visual elements.

Action Steps

Define a pseudo-element using `element::before` or `element::after` to target a specific part of an existing HTML element.
Use the `content` property within the pseudo-element's rule to specify what should be displayed (e.g., `content: '♥';`).
Apply CSS properties like `position`, `z-index`, `font-family`, `color`, and `background` to style the generated content.
Utilize `position: fixed` and `inset: 0` to make the pseudo-element cover the entire viewport.
Set `z-index: -1` to ensure the pseudo-element appears behind the main content.

Key Terms

Pseudo-element: A keyword added to a selector that enables you to style a specific part of the selected element(s), like ::before, ::after, ::first-line, or ::first-letter.
::before: A CSS pseudo-element that inserts content just before the content of an element.
::after: A CSS pseudo-element that inserts content just after the content of an element.
content property: Used with ::before and ::after to specify the content to be inserted, which can be text, an image, or generated counters.
position: fixed: Positions an element relative to the viewport, ensuring it stays in the same place even when the page is scrolled.
z-index: Specifies the stack order of positioned elements; elements with a higher z-index are placed on top of elements with a lower z-index.

Pro Tips

You can use `content: url('path/to/image.png');` to insert an image as generated content.
Combine `::before` and `::after` with `position: absolute` relative to a parent element for complex layout elements like borders or highlights.
Use `counter-reset` and `counter-increment` with pseudo-elements to create custom numbering systems.

Pitfalls to Avoid

Forgetting the `content` property for `::before` or `::after` results in no visible output, wasting styling effort.
Incorrect `z-index` values can cause generated content to appear over or under unintended elements.
Overusing pseudo-elements for essential content can harm accessibility and SEO, as this content is not in the DOM.

Real World Examples

Creating a fixed, full-screen background overlay with text.: The `html::before` rule with `position: fixed`, `inset: 0`, `z-index: -1`, and `content: 'CodePen ♥ The Web';` creates a semi-transparent, fixed background layer that is always visible behind the page content.