Superscript in CSS only

Question

How can I get superscript done  only in CSS   I have a stylesheet where I mark the external links with a superscript character  but I m having a hard time getting the character aligned correctly   What I have currently  looks like this   a external after     font-size  50     vertical-align  top    content           but it doesn t work   Naturally  I d use the  lt sup gt -tag  only if content would allow for HTML

User · Answer

Related or maybe not related  using superscript as a HTML element or as a span css in text might cause problem with localization - in localization programs   For example let s say  3rd party software    3 lt sup gt rd lt  sup gt  party software 3 lt span class  superscript  gt rd lt  span gt  party software   How can translators translate  rd   They can leave it empty for several cyrrilic languages  but what about of other exotic or RTL languages   In this case it is better to avoid using superscripts and use a full wording like  third-party software   Or  as mentioned here in other comments  adding plus signs in superscript via jQuery

User · Answer

This is another clean solution   sub  sup  vertical-align  baseline  position  relative  font-size  70       70  size of its parent element font-size which is good     sub  bottom  -0 6em      use em becasue they adapt to parent font-size    sup  top  -0 6em      use em becasue they adapt to parent font-size      In this way you can still use sup sub tags but you fixed their idious behavior to always screw up paragraph line height   So now you can do      lt p gt This is a line of text  lt  p gt     lt p gt This is a line of text   lt sub gt with sub text  lt  sub gt  lt  p gt     lt p gt This is a line of text   lt sup gt with sup text  lt  sup gt  lt  p gt     lt p gt This is a line of text  lt  p gt    And your paragraph line height should not get screwed up   Tested on IE7  IE8  FF3 6  SAFARI4  CHROME5  OPERA9  I tested using a p  line-height  1 3    that is a good line height unless you want your lines to stick too close  and it still works  cause  -0 6em  is such a small amount that also with that line height the sub sub text will fit and don t go over each other   Forgot a detail that might be relevant I always use DOCTYPE in the 1st line of my page  specifically I use the HTML 4 01  lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt    So I don t know if this solution works well when browser is in quirkmode  or not standard mode  due to lack of DOCTYPE or to a DOCTYPE that does not triggers Standard Almost Standard mode

User · Answer

Check out  http   www cssdesignpatterns com Chapter 2012 20- 20ALIGNING 20CONTENT Vertical-aligned 20Content example html  if looks like you want  vertical-align text-top

User · Answer

You can do superscript with  vertical-align  super   plus an accompanying font-size reduction    However   be sure to read the other answers here  particularly those by paulmurray and cletus  for useful information

User · Answer

If you are changing the font size  you might want to stop shrinking sizes with this rule   sup sub  sub sup  sup sup  sub sub font-size 1em  important

User · Answer

try  aftersup    font-size  1em   margin  left   vertical-align   7em     or plain  quot after quot   after    font-size  1em   margin  left   vertical-align   7em      quot  a external after quot  could be simplified or  after    font-size  50    margin  left   vertical-align   7em     using  quot font size 50  quot  - 50  of what size  this might not work well if not used within some tag defining text size previous to superscript    if you use  quot font-size  1em  quot   then the font size is set for sure  without reference to a tag that defines link text size  unless link text is set at 100  and superscript is 50  of that 100   Using  quot font-size  1em  quot  actually sets font size baseline  Set  quot vertical-align quot  size smaller  if you want superscript font to be smaller than link text Set  quot vertical-align quot  size same as font size  if you want superscript font to be same size as link text To align with link text  you need to set  quot margin quot  same as link text  left  center  right  justified    text     font-size  1em    margin  left     aftersup     font-size  1em    margin  left    vertical-align   7em     It should be something like below example links with superscript  lt p class  quot text quot  gt  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt  a gt  lt aftersup gt   lt  aftersup gt  lt  p gt   or  lt p class  quot text quot  gt  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt  a gt  lt aftersup gt You got this lt  aftersup gt  lt  p gt   or  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt  a gt  lt aftersup gt   lt  aftersup gt   or  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt aftersup gt You got this lt  aftersup gt   As in    Superscript in CSS only   or Superscript in CSS only You got this

User · Answer

http   htmldog com articles superscript  Essentially   position  relative  bottom  0 5em  font-size  0 8em    Works well in practice  as far as I can tell

User · Answer

Honestly I don t see the point in doing superscript subscript in CSS only   There s no handy CSS attribute for it  just a bunch of homegrown implementations including    superscript   position  relative  top  -0 5em  font-size  80       or using vertical-align or I m sure other ways   Thing is  it starts to get complicated    CSS superscript spacing on line height  Beware CSS for Superscript Subcript on why you arguably shouldn t style superscript subscript with CSS at all    The second point is worth emphasizing   Typically superscript subscript is not actually a styling issue but is indicative of meaning   Side note  It s worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn t relate to that   The sub sup tags are in HTML and XHTML   I would just use those   As for the rest of your CSS  the  after pseudo-element and content attributes are not widely supported   If you really don t want to put this manually in the HTML I think a Javascript-based solution is your next best bet   With jQuery this is as simple as     function          a external   append   lt sup gt   lt  sup gt

User · Answer

Check out  http   www cssdesignpatterns com Chapter 2012 20- 20ALIGNING 20CONTENT Vertical-aligned 20Content example html  if looks like you want  vertical-align text-top

User · Answer

I am not sure if this is related but I have solved my problem with   amp sup2  HTML entities as I wasn t able to add any other html tags inside a  lt label gt  tag  So the idea was using ASCII codes instead of css or HTML tags

User · Answer

http   htmldog com articles superscript  Essentially   position  relative  bottom  0 5em  font-size  0 8em    Works well in practice  as far as I can tell

User · Answer

The CSS documentation contains industry-standard CSS equivalent for all HTML constructs  That is  most web browsers these days do not explicitly handle SUB  SUP  B  I and so on - they  kinda sorta  are converted into SPAN elements with appropriate CSS properties  and the rendering engine only deals with that   The page is Appendix D  Default style sheet for HTML 4  The bits you want are   small  sub  sup   font-size   83em   sub               vertical-align  sub   sup               vertical-align  super

User · Answer

Honestly I don t see the point in doing superscript subscript in CSS only   There s no handy CSS attribute for it  just a bunch of homegrown implementations including    superscript   position  relative  top  -0 5em  font-size  80       or using vertical-align or I m sure other ways   Thing is  it starts to get complicated    CSS superscript spacing on line height  Beware CSS for Superscript Subcript on why you arguably shouldn t style superscript subscript with CSS at all    The second point is worth emphasizing   Typically superscript subscript is not actually a styling issue but is indicative of meaning   Side note  It s worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn t relate to that   The sub sup tags are in HTML and XHTML   I would just use those   As for the rest of your CSS  the  after pseudo-element and content attributes are not widely supported   If you really don t want to put this manually in the HTML I think a Javascript-based solution is your next best bet   With jQuery this is as simple as     function          a external   append   lt sup gt   lt  sup gt

User · Answer

try  aftersup    font-size  1em   margin  left   vertical-align   7em     or plain  quot after quot   after    font-size  1em   margin  left   vertical-align   7em      quot  a external after quot  could be simplified or  after    font-size  50    margin  left   vertical-align   7em     using  quot font size 50  quot  - 50  of what size  this might not work well if not used within some tag defining text size previous to superscript    if you use  quot font-size  1em  quot   then the font size is set for sure  without reference to a tag that defines link text size  unless link text is set at 100  and superscript is 50  of that 100   Using  quot font-size  1em  quot  actually sets font size baseline  Set  quot vertical-align quot  size smaller  if you want superscript font to be smaller than link text Set  quot vertical-align quot  size same as font size  if you want superscript font to be same size as link text To align with link text  you need to set  quot margin quot  same as link text  left  center  right  justified    text     font-size  1em    margin  left     aftersup     font-size  1em    margin  left    vertical-align   7em     It should be something like below example links with superscript  lt p class  quot text quot  gt  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt  a gt  lt aftersup gt   lt  aftersup gt  lt  p gt   or  lt p class  quot text quot  gt  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt  a gt  lt aftersup gt You got this lt  aftersup gt  lt  p gt   or  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt  a gt  lt aftersup gt   lt  aftersup gt   or  lt a href  quot url quot  gt https   stackoverflow com questions 501671 superscript-in-css-only lt aftersup gt You got this lt  aftersup gt   As in    Superscript in CSS only   or Superscript in CSS only You got this

User · Answer

I was working on a page with the aim of having clearly legible text  with superscript elements NOT changing the line s top and bottom margins - with the following observations   If for your main text you have line-height  1 5em for example  you should reduce the line-height of your superscript text for it to appear correctly  I used line-height  0 5em   Also  vertical-align  super works well in most browsers but in IE8 when you have a superscript element present  the rest of that line is pushed down  So instead I used vertical-align  baseline together with a negative top and position  relative to achieve the same effect  which seems to work better across browsers   So  to add to the  homegrown implementations     superscript       font-size   83em      line-height  0 5em      vertical-align  baseline      position  relative      top  -0 4em

User · Answer

The following is taken from Mozilla Firefox s internal html css   sup     vertical-align  super    font-size  smaller    line-height  normal      So  in your case it would be something  like    superscript     vertical-align  super    font-size  smaller    line-height  normal

User · Answer

Check out  http   www cssdesignpatterns com Chapter 2012 20- 20ALIGNING 20CONTENT Vertical-aligned 20Content example html  if looks like you want  vertical-align text-top

User · Answer

Honestly I don t see the point in doing superscript subscript in CSS only   There s no handy CSS attribute for it  just a bunch of homegrown implementations including    superscript   position  relative  top  -0 5em  font-size  80       or using vertical-align or I m sure other ways   Thing is  it starts to get complicated    CSS superscript spacing on line height  Beware CSS for Superscript Subcript on why you arguably shouldn t style superscript subscript with CSS at all    The second point is worth emphasizing   Typically superscript subscript is not actually a styling issue but is indicative of meaning   Side note  It s worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn t relate to that   The sub sup tags are in HTML and XHTML   I would just use those   As for the rest of your CSS  the  after pseudo-element and content attributes are not widely supported   If you really don t want to put this manually in the HTML I think a Javascript-based solution is your next best bet   With jQuery this is as simple as     function          a external   append   lt sup gt   lt  sup gt

User · Answer

The following is taken from Mozilla Firefox s internal html css   sup     vertical-align  super    font-size  smaller    line-height  normal      So  in your case it would be something  like    superscript     vertical-align  super    font-size  smaller    line-height  normal

User · Answer

superscript     position  relative    top  5px    font-size  90     vertical-align  super

User · Answer

Related or maybe not related  using superscript as a HTML element or as a span css in text might cause problem with localization - in localization programs   For example let s say  3rd party software    3 lt sup gt rd lt  sup gt  party software 3 lt span class  superscript  gt rd lt  span gt  party software   How can translators translate  rd   They can leave it empty for several cyrrilic languages  but what about of other exotic or RTL languages   In this case it is better to avoid using superscripts and use a full wording like  third-party software   Or  as mentioned here in other comments  adding plus signs in superscript via jQuery

User · Answer

Here s the exact way sup uses    superscript      vertical-align super      font-size smaller      Found this via google chrome inspect element

User · Answer

If you are changing the font size  you might want to stop shrinking sizes with this rule   sup sub  sub sup  sup sup  sub sub font-size 1em  important

User · Answer

You can do superscript with  vertical-align  super   plus an accompanying font-size reduction    However   be sure to read the other answers here  particularly those by paulmurray and cletus  for useful information

User · Answer

http   htmldog com articles superscript  Essentially   position  relative  bottom  0 5em  font-size  0 8em    Works well in practice  as far as I can tell

User · Answer

http   htmldog com articles superscript  Essentially   position  relative  bottom  0 5em  font-size  0 8em    Works well in practice  as far as I can tell

User · Answer

This is another clean solution   sub  sup  vertical-align  baseline  position  relative  font-size  70       70  size of its parent element font-size which is good     sub  bottom  -0 6em      use em becasue they adapt to parent font-size    sup  top  -0 6em      use em becasue they adapt to parent font-size      In this way you can still use sup sub tags but you fixed their idious behavior to always screw up paragraph line height   So now you can do      lt p gt This is a line of text  lt  p gt     lt p gt This is a line of text   lt sub gt with sub text  lt  sub gt  lt  p gt     lt p gt This is a line of text   lt sup gt with sup text  lt  sup gt  lt  p gt     lt p gt This is a line of text  lt  p gt    And your paragraph line height should not get screwed up   Tested on IE7  IE8  FF3 6  SAFARI4  CHROME5  OPERA9  I tested using a p  line-height  1 3    that is a good line height unless you want your lines to stick too close  and it still works  cause  -0 6em  is such a small amount that also with that line height the sub sub text will fit and don t go over each other   Forgot a detail that might be relevant I always use DOCTYPE in the 1st line of my page  specifically I use the HTML 4 01  lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt    So I don t know if this solution works well when browser is in quirkmode  or not standard mode  due to lack of DOCTYPE or to a DOCTYPE that does not triggers Standard Almost Standard mode

User · Answer

Here s the exact way sup uses    superscript      vertical-align super      font-size smaller      Found this via google chrome inspect element

User · Answer

superscript     position  relative    top  5px    font-size  90     vertical-align  super

User · Answer

I am not sure if this is related but I have solved my problem with   amp sup2  HTML entities as I wasn t able to add any other html tags inside a  lt label gt  tag  So the idea was using ASCII codes instead of css or HTML tags

User · Answer

You can do superscript with  vertical-align  super   plus an accompanying font-size reduction    However   be sure to read the other answers here  particularly those by paulmurray and cletus  for useful information

User · Answer

The CSS documentation contains industry-standard CSS equivalent for all HTML constructs  That is  most web browsers these days do not explicitly handle SUB  SUP  B  I and so on - they  kinda sorta  are converted into SPAN elements with appropriate CSS properties  and the rendering engine only deals with that   The page is Appendix D  Default style sheet for HTML 4  The bits you want are   small  sub  sup   font-size   83em   sub               vertical-align  sub   sup               vertical-align  super

User · Answer

You can do superscript with  vertical-align  super   plus an accompanying font-size reduction    However   be sure to read the other answers here  particularly those by paulmurray and cletus  for useful information

User · Answer

Honestly I don t see the point in doing superscript subscript in CSS only   There s no handy CSS attribute for it  just a bunch of homegrown implementations including    superscript   position  relative  top  -0 5em  font-size  80       or using vertical-align or I m sure other ways   Thing is  it starts to get complicated    CSS superscript spacing on line height  Beware CSS for Superscript Subcript on why you arguably shouldn t style superscript subscript with CSS at all    The second point is worth emphasizing   Typically superscript subscript is not actually a styling issue but is indicative of meaning   Side note  It s worth mentioning this list of entities for common mathematical superscript and subscript expressions even though this question doesn t relate to that   The sub sup tags are in HTML and XHTML   I would just use those   As for the rest of your CSS  the  after pseudo-element and content attributes are not widely supported   If you really don t want to put this manually in the HTML I think a Javascript-based solution is your next best bet   With jQuery this is as simple as     function          a external   append   lt sup gt   lt  sup gt

User · Answer

I was working on a page with the aim of having clearly legible text  with superscript elements NOT changing the line s top and bottom margins - with the following observations   If for your main text you have line-height  1 5em for example  you should reduce the line-height of your superscript text for it to appear correctly  I used line-height  0 5em   Also  vertical-align  super works well in most browsers but in IE8 when you have a superscript element present  the rest of that line is pushed down  So instead I used vertical-align  baseline together with a negative top and position  relative to achieve the same effect  which seems to work better across browsers   So  to add to the  homegrown implementations     superscript       font-size   83em      line-height  0 5em      vertical-align  baseline      position  relative      top  -0 4em

User · Answer

Check out  http   www cssdesignpatterns com Chapter 2012 20- 20ALIGNING 20CONTENT Vertical-aligned 20Content example html  if looks like you want  vertical-align text-top

User · Answer

The CSS property font-variant-position is under consideration and may eventually be the answer to this question  As of early 2017  only Firefox supports it  though    super       font-variant-position  super      See MDN

User · Answer

The CSS property font-variant-position is under consideration and may eventually be the answer to this question  As of early 2017  only Firefox supports it  though    super       font-variant-position  super      See MDN

[css] Superscript in CSS only?

Examples related to css