A CSS pseudo-element selects a conceptual part of an element rather than the whole element. Write two colons after the element selector: `p::first-letter` targets a paragraph’s first letter. This differs from a pseudo-class such as `:hover`, which targets an element in a particular state. section 1.6.3
Accent a first letter
To give an opening paragraph a small visual accent, use `header + p::first-letter { color: crimson; font-style: italic; }`. The selector limits the effect to the first paragraph immediately after the header; the pseudo-element limits it to that paragraph’s first letter. section 1.6.3
Add punctuation to a checkout summary
In a description list, `dt::after { content: ": "; }` places a colon after each description term. The `::after` pseudo-element supplies the position, and `content` supplies the character. section 8.2.5
Pseudo-elements also reach parts of browser-rendered controls. A progress indicator can be styled with `::-moz-progress-bar` in Firefox or `::-webkit-progress-value` in Chrome. These experimental selectors are kept in separate, otherwise identical rules: combining them in one rule breaks the Chrome styling in this example. Check browser behavior when using prefixed pseudo-elements. section 3.6.3
A pseudo-element counts as a type selector when CSS calculates specificity, with a value of 1. Not every pseudo-element works on every HTML element, so choose one that fits the part you need to style. section 1.5 section 1.6.3
