Improving card patterns with anchor positioning

The title “Improving card patterns with anchor positioning” beside CSS code and a card mockup with a dashed ::after overlay stopping above a dark button.

Emil Björklund covers a card with a link pseudo-element via anchor positioning, so the whole surface is clickable without wrapping everything in one <a>. With position-area: center and place-self: stretch the pseudo fills the card, while an anchor() bottom inset ties it to the secondary actions, leaving dead space around the favorite button without magic numbers.

thatemil.com/blog/clickable-surface-expansion-using-anchor-position