counter-increment and CSS counters generally. I make use of them especially on the wiki of my subreddit. What I realized recently is that you can number pretty much anything. I apply them elsewhere to alert boxes / notes in technical texts.
::after pseudo-selectors (see also:
content: attribute. Note that the injected content isn't HTML, isn't rendered as HTML (so
content: "<i>Italic text</i>" will be inserted as just that, "Italic text", not "Italic text". This also means that my superscript links aren't actually links, so use for footnotes wouldn't work. I'm still mulling over how to come up with a CSS-only endnote method, with hypertext links. So far, no breakthroughs. Using a preprocessor (e.g., Markdown, LaTeX) that creates proper endnotes seems to be the way to fly.
attr() attribute. Another interesting one is
calc(), useful for width adjustments. And I've just learned of
toggle() while looking up those two, which ... could be interesting. Hrm. Not sure I get what it does.
Discovered while coding this up,
text-align: super;. That gets the superscript effect.
The distinction between em and rem units which had stumped me. Nutshell: 'em' adjusts size relative to the parent container while 'rem' is a "root em" -- it's a size universal to a page. While ems can be specified at different sizes according to context, 1rem is 1rem wherever it appears.
Pile that on with mucking with CSS, looking at responsive design, and thinking about print stylesheets. Voila: sidenote URL links.