发表新帖
发表新帖

Superscript in CSS only?

后端 未结
关注
15 1378
花落未央
花落未央 2020-11-29 15:20

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 th

相关标签:
15条回答
  • 故里飘歌
    2020-11-29 16:05

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

    0 讨论(0)
  • 情歌与酒
    2020-11-29 16:08

    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:

      <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

    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 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). 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.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-29 16:09

    try

    .aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

    or plain "after"

    .after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

    ".a.external:after" could be simplified

    or

    .after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

    using "font size 50%" - 50% of what size? this might not work well if not used within some tag defining text size previous to superscript...

    if you use "font-size: 1em;" 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 "font-size: 1em;" actually sets font size baseline.

    Set "vertical-align" size smaller, if you want superscript font to be smaller than link text

    Set "vertical-align" 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 "margin" 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

    <p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

    or

    <p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

    or

    <a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

    or

    <a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

    As in...

    Superscript in CSS only?+

    or

    Superscript in CSS only?You got this

    0 讨论(0)
 看不清?
提交回复
热议问题