Reputation: 13866

Overriding <sup> styling

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!

Upvotes: 3

Answers (4)

Reputation: 46539

According to Mozilla, the default style for sup is

vertical-align: super;
font-size: smaller;
line-height: normal;

so those are the three properties you'll need to reset.

Upvotes: 1

Reputation: 14391

By adding following style for 'sup', you can do this.

sup{
  font-size: initial;
  vertical-align: baseline;
}

Upvotes: 1

Reputation: 18803

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>

Upvotes: 3

Reputation: 4014

The sup tag uses font-size and vertical align to create the effect, you can reset this back to its initial values though.

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

Upvotes: 3