Format superscript text in Divi

TIPS

Nov 21, 2020 | Divi Tips | 5 comments

Add the following CSS code to the Divi theme options area or your child theme style.css file.

[css]
sub, sup {
  font-size: 25%;
  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  /* Move the superscripted text up */
  top: -1.25em;
}
sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}
[/css]

5 Comments

Lance on April 27, 2022 at 2:44 pm

Hey, Thanks for this! Worked perfectly.
Reply
- DiviGuy on April 27, 2022 at 6:00 pm
  
  Awesome! You’re welcome!
  Reply
Ado Ello on August 14, 2022 at 2:15 pm

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
Reply
Mazz on August 14, 2022 at 5:51 pm

Hi sorry I’m new to all this CSS stuff, I’ve added this code to the DIVI Options but what else should I do please? Might you do a step by step guide please? lol I’d really appreciate before I lose the will to live…
Reply
DiviGuy on August 14, 2022 at 11:09 pm

Hi Mazz,
There is nothing else to do, other than save the Divi options, unless you want to modify the CSS to suit your needs.
Reply