Sidenotes with CSS anchor positioning

Article text with sidenotes in the right margin, one reading “My PhD advisor told me this is unwise.”, an HTML snippet, and the title “Sidenotes with CSS anchor positioning” by Vincent Bernat.

Vincent Bernat moves footnotes into the margin with anchor-name and position-anchor, both read from data attributes with typed attr(). Each note lines up with its reference mark, and when the previous one is in the way, a max() of two anchor() values pushes it a line below instead. On narrow viewports and older browsers, notes stay under their paragraph, muted.

vincent.bernat.ch/en/blog/2026-css-sidenotes