JSFiddle - React, Tailwind, and code Playground

by kaidjohnson

HTML

<h3>For the following characters, the glyph is superscripted by default, so <strong>don't</strong> wrap them with a <code>sup</code> tag.</h3>
    <p>This is a <a href="#">linked&#39; apostrophe</a> for testing.</p>
    <p>This is a <a href="#">linked&#34; quotation mark</a> for testing.</p>
    <p>This is a <a href="#">linked&#8216; left single quotation mark</a> for testing.</p>
    <p>This is a <a href="#">linked&#8217; right single quotation mark</a> for testing.</p>
    <p>This is a <a href="#">linked&#8220; left double quotation mark</a> for testing.</p>
    <p>This is a <a href="#">linked&#8221; right double quotation mark</a> for testing.</p>
    <p>This is a <a href="#">linked&#8242; prime</a> for testing.</p>
    <p>This is a <a href="#">linked&#8243; double prime</a> for testing.</p>
    <p>This is a <a href="#">linked&#180; acute accent</a> for testing.</p>
    <p>This is a <a href="#">linked&#732; small tilde</a> for testing.</p>
    <p>This is a <a href="#">linked&#710; modifier letter circumflex accent</a> for testing.</p>
    <p>This is a <a href="#">linked&#8254; overline</a> for testing.</p>
    <p>This is a <a href="#">linked&#185; superscript one</a> for testing.</p>
    <p>This is a <a href="#">linked&#178; superscript two</a> for testing.</p>
    <p>This is a <a href="#">linked&#179; superscript three</a> for testing.</p>
    <p>This is a <a href="#">linked&#170; feminine ordinal indicator</a> for testing.</p>
    <p>This is a <a href="#">linked&#186; masculine ordinal indicator</a> for testing.</p>
    <p>This is a <a href="#">linked&#175; macron</a> for testing.</p>
    <p>This is a <a href="#">linked&#168; diaeresis</a> for testing.</p>
    <p>This is a <a href="#">linked&#176; degree symbol</a> for testing.</p>
    <p>This is a <a href="#">linked&#8482; trademark symbol</a> for testing.</p>

      <h3>For the following characters, the glyph is not superscripted by default. If you need them to be superscripted, you'll need to wrap them...

CSS

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */  
  font-size: 75%;
    
  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
  
  /* Prevent sup and sub from rendering text-decoration */
  display: inline-block;
}

sup {
  /* Move the superscripted text up */
  transform: translateY(-0.5em);
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  transform: translateY(-0.25em);
}