sup
Represents superscript text for exponents, ordinals, footnotes, and trademark symbols. Uses font-variant-position for proper OpenType rendering.
Description
The <sup> element displays inline text as superscript. VB uses font-variant-position: super for proper OpenType rendering with a fallback for older browsers, and provides dedicated styling for footnote patterns via sup.footnote-ref and .footnotes.
When to Use
- Exponents: E = mc2, r2
- Ordinal numbers: 1st, 2nd, 3rd
- Footnote references: Inline citation markers
- Trademark symbols: ProductTM, Brand®
Examples
Exponents
<p>E = mc<sup>2</sup></p><p>Area = <var>π</var><var>r</var><sup>2</sup></p>Ordinal numbers
<p>1<sup>st</sup> place gold, 2<sup>nd</sup> silver, 3<sup>rd</sup> bronze.</p>Footnote references
<p> According to studies<sup><a href="#ref1">[1]</a></sup>, this approach is more effective<sup><a href="#ref2">[2]</a></sup>.</p>Footnote Pattern
VB provides dedicated styling for footnote references (sup.footnote-ref) and footnote definition lists (.footnotes):
Footnote pattern
<!-- Inline reference --><p>The experiment showed improvement<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p> <!-- Footnote definitions --><ol class="footnotes"> <li id="fn1">Smith et al., <cite>Journal</cite>, 2025. <a href="#fnref1">↩</a></li></ol>| Selector | Purpose |
|---|---|
sup.footnote-ref | Smaller, medium-weight superscript for footnote markers |
sup.footnote-ref > a | No underline, padded click target |
.footnotes | Muted, smaller text with top border separator |
.footnotes a[href^="#fnref"] | Back-to-reference links without underline |
For automatic footnote management, use the <foot-notes> web component which handles numbering, linking, and accessibility.
CSS Reference
sup CSS (progressive enhancement)
sup { font-variant-position: super; font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; inset-block-end: 0.5em;} @supports (font-variant-position: super) { sub, sup { vertical-align: inherit; font-size: inherit; position: static; inset-block-end: unset; line-height: inherit; }}Footnote CSS
sup.footnote-ref { font-size: 0.65em; font-weight: 500; & > a { text-decoration: none; padding: var(--size-3xs); }} :is(ol, ul).footnotes { font-size: var(--font-size-sm); color: var(--color-text-muted); border-block-start: var(--border-width-thin) solid var(--color-border); padding-block-start: var(--size-m); margin-block-start: var(--size-xl);} .footnotes a[href^="#fnref"] { text-decoration: none; font-size: 0.85em;}Accessibility
- Screen readers may not announce superscript formatting
- For footnotes, the link text (e.g., "[1]") provides navigable context
- The
.footnoteslist uses an<ol>so screen readers announce numbered items - Back-to-reference links (
↩) let users return to where they left off
Related
<sub>— Subscript (chemical formulas, math indices)<var>— Mathematical variables<foot-notes>— Automatic footnote management web component<a>— Footnote reference links