A (terrible?) way to do footnotes in HTML

This approach to HTML footnotes using <details></details>/<summary></summary> elements, while clever, presents some challenges. Terence Eden's method cleverly places the footnote details directly adjacent to the referenced text, leveraging the native open/close functionality of the disclosure widget. However, the block-level nature of the <details></details> element requires inline styling and precise positioning to achieve a visually appealing result. This is further complicated by its incompatibility with <a></a> tags, limiting practical application.

Craig Shoemaker's CSS refinements, as seen in the comments, offer improvements. Instead of directly inline footnote text (which presents significant complexity), the footnote content is relocated to a fixed position at the page's bottom.

While not definitively a superior or inferior method, this alternative approach warrants consideration. The balance between cleverness and practical implementation remains a point of discussion.

The above is the detailed content of A (terrible?) way to do footnotes in HTML. For more information, please follow other related articles on the PHP Chinese website!