Eric Meyer explores turning inline parenthetical asides into CSS-anchored sidenotes using only HTML and CSS, without JavaScript. He walks through the markup structure needed (nested spans to wrap parentheses, a trailing sup for markers), the CSS anchor positioning logic to place notes to the right of the main content, and the pseudo-element tricks to hide parentheses and add capitalization and full stops. He ultimately concludes the approach is impractical due to markup clutter, edge cases with punctuation, and the lack of CSS character selectors or outside-element generated content. He hints that a cleaner solution using custom elements and the Light DOM is coming in a follow-up post.
6 Impressions