Pseudo-elements

## What a pseudo-element is Most selectors match elements that already exist in the document. A pseudo-element instead addresses a part of the rendering that has no element of its own. `::before` and `::after` are the extreme case: they address boxes that do not exist at all until CSS asks for them. That is why they are called *generated content*. Because the box is generated, CSS needs an explicit signal to generate it, and that signal is the `content` property. ## Why `content` is mandatory The `content` property's initial value is the keyword `normal`. On a regular element `normal` means "render your own children". On `::before` and `::after`, `normal` computes to `none`, and `none` means *no box is generated*. So this rule does absolutely nothing: ```css .card::before { color: red; width: 40px; height: 40px; background: black; } ``` There is no box for `color`, `width` or `background` to apply to. Add one line and the box appears: ```css .card::before { content: ""; display: block; width: 40px; height: 40px; background: black; } ``` Note that `content: none` and `content: normal` both suppress the box, and `content: initial` resolves to `normal`, so it suppresses it too. Only a value that actually names something to render — a string, an image, a counter, an attribute value, or a quote keyword — creates the box. ## What values `content` accepts - **A string**: `content: "→"`. Escapes use CSS syntax, so a Unicode code point is written `content: "\2192"`. - **The empty string**: `content: ""` — a box with no text, the workhorse for decoration. - **An image**: `content: url(check.svg)` or a gradient, e.g. `content: linear-gradient(red, blue)`. An image value makes the pseudo-element behave like a replaced box, so text styling no longer applies to it. - **`attr()`**: `content: attr(data-label)` pulls a string from an attribute on the originating element. - **Counters**: `content: counter(section) ". "`, used with `counter-reset` and `counter-increment` for numbered headings. - **Quote keywords**: `open-quote` / `close-quote`, which render the current `quotes` value. Values can be concatenated by juxtaposition: `content: "Step " counter(step) ": "`. ## Where the generated box sits `::before` is inserted as the first child of the originating element's box, `::after` as the last — *inside* the element, not next to it. Two consequences follow. First, it inherits inheritable properties (`color`, `font-family`, `line-height`) from the originating element, not from the parent. Second, it participates in that element's formatting context: inside a flex container the generated box becomes a flex item, inside a grid container it becomes a grid item and can be auto-placed into a track. ## The `display: inline` default A generated box defaults to `display: inline`. On an inline box, `width` and `height` do not apply and vertical margins do not affect layout, which is why beginners report that "width is ignored on ::before". Three standard fixes: ```css /* 1. make it a block-level box */ .bar::before { content: ""; display: block; width: 100%; height: 2px; } /* 2. keep it in the text flow but sizable */ .icon::before { content: ""; display: inline-block; width: 1em; height: 1em; } /* 3. take it out of flow and pin it to the element */ .badge { position: relative; } .badge::after { content: ""; position: absolute; inset: 0; } ``` Option 3 is the common overlay pattern: the originating element establishes a containing block with `position: relative`, and the absolutely positioned pseudo-element stretches across it. ## Practical notes A whitespace-only string such as `content: " "` is *not* the same as `content: ""` — it renders a space character, which may collapse or may add width depending on `white-space`. And because generated content lives only in the stylesheet, it cannot be selected, copied or found with the browser's in-page search, which is why it belongs to decoration rather than to meaningful copy.