Overriding <sup> styling

Question

I'd like to ignore/override <sup> elements style with CSS so they would look like regular text. I cannot unwrap superscript elements in my HTML.

In other words the output of

<div>Some <sup>random</sup> text.<div>

should look exactly like

<div>Some random text.<div>

How can I achieve this, please? Should I try to counter the effects of the superscript, or is there a smarter way? Thanks in advance!

Answer 1

You can make the sup tag inherit its font-size and vertical-align from its parent (the div).

sup {
  font-size: inherit;
  vertical-align: inherit;
}

<div>Some <sup>random</sup> text.<div>

This will work even if the parent has had more styles applied to it.

div {
  font-size: 10px;
}

sup {
  font-size: inherit;
  vertical-align: inherit;
}

<div>Some <sup>random</sup> text.<div>