In CSS, why do width, padding and border have no effect when set on ::selection or ::marker?

## Three different kinds of pseudo-element It is tempting to treat pseudo-elements as one uniform feature, but they fall into categories that behave very differently, and the property restrictions follow directly from the category. **Generated-content pseudo-elements** — `::before`, `::after`. These create a genuine box in the box tree. The whole box model applies: `display`, `width`, `padding`, `border`, `margin`, positioning, transforms. **Highlight pseudo-elements** — `::selection` is the familiar one; the same family includes the spell-check and search-match highlights. These do not create boxes at all. They repaint characters that the layout algorithm has already positioned. Layout has finished; only painting is left. **Tree-abstiding / structural pseudo-elements** — `::first-line`, `::first-letter`, `::marker`, `::placeholder`, `::backdrop`. Each addresses a specific rendered part with its own rules about what may change. ## `::selection` and why sizing is meaningless A text selection changes continuously as the user drags. If `padding` on `::selection` were honoured, every mouse move would reflow the paragraph under the cursor. The specification therefore limits the property set to painting concerns: ```css ::selection { color: #fff; /* applies */ background-color: #06c; /* applies */ text-decoration: underline; /* applies */ text-shadow: none; /* applies */ padding: 4px; /* ignored */ border: 1px solid red; /* ignored */ display: block; /* ignored */ } ``` One extra detail catches people out: `background-image` is not honoured on `::selection`, only `background-color`. And because the highlight paints over the text, a `background-color` with alpha composites against whatever is underneath rather than replacing it. ## `::marker` and the list-item bullet `::marker` targets the bullet or number box of a list item (or of any element with `display: list-item`). Its accepted properties are the font properties, `color`, `content`, `white-space`, plus animation and transition properties: ```css li::marker { color: crimson; /* applies */ font-size: 1.4em; /* applies */ content: "– "; /* applies */ margin-right: 12px; /* ignored */ background: yellow; /* ignored */ } ``` So how do you move the bullet? Not through `::marker`. You use the list item's own properties — `list-style-position`, padding on the list, or the modern approach of `display: list-item` on a custom element with `list-style-type` set. The restriction exists because the marker's placement is the list layout algorithm's business, not the marker's. ## `::placeholder` and `::first-line` `::placeholder` styles the placeholder text a form control shows while empty. It accepts the properties that apply to `::first-line` — essentially the text and inline-painting properties: `color`, the font properties, `background`, `letter-spacing`, `word-spacing`, `text-decoration`, `text-transform`, `line-height`, `opacity`. Box properties are not among them, because the placeholder is text rendered inside a box that already exists. `::first-line` has the same character: it addresses whatever characters happen to land on the first line, and that set changes when the container is resized. The specification calls this the *fictional tag sequence* — the browser behaves as if a tag were wrapped around the first line, but the boundary is recomputed on every layout. Since the line's extent is a layout output, you cannot feed box properties back into it. ## `::first-letter` is the exception `::first-letter` genuinely does accept box properties: `margin`, `padding`, `border`, `background`, `float`, plus `font-size`, `line-height`, `text-transform` and `vertical-align`. That is what makes drop caps possible: ```css p::first-letter { float: left; font-size: 3.2em; line-height: 0.8; padding-right: 6px; margin-top: 4px; } ``` The difference is that a first letter is a single, stable inline box, so giving it dimensions is a well-defined operation in a way that sizing a live selection range is not. ## The practical takeaway When a declaration on a pseudo-element is ignored, do not reach for `!important` or start hunting for a competing rule. Ask instead which category the pseudo-element belongs to. If it repaints existing text, only painting properties will do anything; if it generates a box, the box model is fully available; if it is a marker or a placeholder, look up the specific list. Devtools helps here: computed styles will show the declaration as present but the rendering will not change, which is the signature of a property that is simply not in the accepted set.