JSFiddle - React, Tailwind, and code Playground

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

p {
   margin: 10px;
}

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;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

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

a {
    text-decoration: none;
    background: -moz-linear-gradient(left, red, red 100%);
    background: -ms-linear-gradient(left, red, red 100%);
    background: -o-linear-gradient(left, red, red 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(red));
    background: -webkit-linear-gradient(left, red, red 100%);
    background: linear-gradient(left, red, red 100%);
    background-position: 0 100%;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}