Prisma says::first-letter and ::first-line style the opening of a text block — drop caps and lead-ins.
::first-letter targets the first character (classic drop cap), and ::first-line the first rendered line (which changes with width). They only apply to block containers. Pair ::first-letter with float:left and a big font for a magazine initial.
Power-ups you unlock
::first-letter → drop caps
::first-line → styled lead-in (reflows with width)
Block containers only
Float the first-letter for a drop cap
Jank the Janitor attacks — common mistakes
Applying to inline elements (no effect)
Expecting ::first-line to stay fixed on resize
Only a subset of properties are allowed
Boss battleMake a drop cap with ::first-letter and tint the ::first-line.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>p{color:#e6e0ff;max-width:320px}p::first-letter{font-size:3em;float:left;color:#b388ff;line-height:1;margin-right:6px}p::first-line{color:#8aff9d}</style></head><body style="background:#06040d;padding:20px"><p>The first letter becomes a drop cap and the first line gets a tint, both purely in CSS with no extra markup.</p></body></html>