Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
footnotes

3 Articles
{
,

}
Image
Direct link to the article A (terrible?) way to do footnotes in HTML
details/summary footnotes

A (terrible?) way to do footnotes in HTML

Terence Eden poked around with a way to do footnotes using the <details>/<summary> elements. I think it’s kind of clever. Rather than a hyperlink that jumps down to explain the footnote elsewhere, the details are right there next …

Image
Chris Coyier on Jan 13, 2021
Image
Direct link to the article Exploring What the Details and Summary Elements Can Do
details/summary footnotes tooltip

Exploring What the Details and Summary Elements Can Do

We’ve mentioned before just how great the <details> and <summary> elements are. They’re great for quickly making accordions that are accessible to touch, mouse, and keyboard input:

CodePen Embed Fallback

<details> and <summary> can even be used to play/pause gifs…

Image
Robin Rendle on Nov 26, 2020
Image
Direct link to the article Footnote Characters
footnotes gutenberg

Footnote Characters

There are special superset number characters that are sometimes perfect for footnotes. Here they are:

¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹

I generally prefer to superscript the number myself, like:…

Image
Chris Coyier on Feb 19, 2020

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement