A pseudo-element styles part of an element that has no tag of its own. It uses a double colon (legacy :before and :after still work), must end its compound selector, and adds 0-0-1.
| Selector | Styles |
|---|---|
| ::before / ::after | Generated first / last child (needs content) |
| ::first-letter / ::first-line / ::marker | First letter / first line / list bullet |
| ::selection / ::placeholder | Highlighted text / placeholder text |
| ::backdrop | Layer behind a modal or fullscreen element |
| ::part(name) / ::slotted(sel) | Shadow part / slotted light-DOM child |
::part() and ::slotted() are the sanctioned holes in a web component's style encapsulation (HTML DOM APIs). ::placeholder and ::backdrop are Baseline widely available; ::marker and ::selection are not yet, because Safari 10 's support is incomplete.
<!doctype html>
<style>
body { font: 15px system-ui; } p, ul { margin: 4px 0; } li::marker { content: "\2713 "; }
p::first-letter { font-size: 2em; color: #6a1b9a; } x-card::part(title) { color: #1565c0; }
.price::before { content: "$"; } .price::after { content: " / month"; color: #78909c; }
</style>
<p>Pseudo-elements style parts you never wrote as tags.</p>
<ul><li>Custom check-mark marker</li></ul>
<x-card><template shadowrootmode="open"><style>::slotted(span) { background: #fff3e0; }</style>
<b part="title">Shadow DOM title via ::part</b><br><slot></slot></template>
<span>Slotted text</span> <span class="price">9</span></x-card>