Superscript in CSS Only

Superscript in CSS only?

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.

How am I supposed to write superscript text?

Just use super,

As you have seen in the reference from W3C the sup tag is just a routine for the CSS:

sup {
    vertical-align: super;
    font-size: smaller;
}

Pros: It works across all platforms and this is what it's intended for. Also provides semantic meaning to screen readers and other 'bots.

Cons: Some people just love to do it themselves in CSS.

Edit: And full credit to j08691 - for this very succinct comment:

SO filters what code you can use, and it has no bearing on what you should use in your own projects

superscript first item in piece of text with css

span.price:before{ content:'$'; font-size:xx-small; vertical-align:top; }

This will make:

<p>The current price is <span class="price">100.0</span></p>

Into:

The current price is $100.0

Except that $ will be superscript.

Edit: I tested it again and can confirm the above works. However all browser does not support before and after in css.

Otherwise you could just do it with html like this:

<p>The current price is <sup class="price">$</sup>100.0</p>

Proof of concept markup for both solutions:

<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <title>Price test</title> 
    <style>
        span.price:before{ content:'$'; font-size:xx-small; vertical-align:top; }
    </style>
</head> 
<body>
    <p>The price is <span class="price">100.0</span></p>
    <p>The price is <sup>$</sup>100.0</p>
</body></html>

CSS/HTML - How can I write superscript in a input type= button / ?

You can inject a seperate style with the ::after pseudo class.

CSS

button::after {
    content: attr(data-superscript);
    vertical-align: super;
}

HTML

<button data-superscript="8">2</button>

Using the attr() property, you can dynamically change the superscript value based on the data-superscript attribute.

Note that this is CSS3, and it's not compatible with all browsers.

JSFiddle

CSS :before superscript 6 ?

The obvious way does work, in fact:

span:before {
    content: "⁶";
}

You may have to be careful with encodings used and specified in this case, though.

As BoltClock mentions, you can also escape the character as \2076 if encoding problems are a concern (e.g. if your server forces legacy codepages and you cannot change that).

Superscript inside a p:after content tag

You can't style generated content partially (with the exception of combining :first-letter and :before), so no. You could use U+00B3 SUPERSCRIPT THREE instead:

.class {
    &:after {
        content: "m\00B3/s"; /* Or content: "m³/s"; */
    }
}

... but I would recommend putting this as actual content and either using U+00B3, ³ or the  element if it is semantically important.

CSS superscript registration trademark

I know you asked CSS but this jQuery code worked for me, hope it helps you

<html>
    <head>
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("body").html(
                    $("body").html().replace("®", "<sup>®</sup>")
                ); 
            });
        </script>
    </head>
    <body>
        Some text here ®
    </body>
</html>

Adding a superscript font awesome icon using CSS classes

If you are asking for an official 'font-awesome' way, I don't know it - but here's the logic behind how I'd try and do it.

First I would create a jsFiddle - and make sure that the font and other dependencies are loaded / so we're all on the same page: http://jsfiddle.net/sheriffderek/rqLkjmo3/2/ --- it looks like this link: http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css includes the @font inclusion and the css.

Then I would create some functionality to check:

<ul class='icon-list'>
  <li class='icon fa fa-camera-retro' id='test'></li>
</ul>

<button rel='toggle'>toggle superscript</button>

jQuery in this case:

var $button = $('[rel="toggle"]');

$button.on('click', function() {
    $('#test').toggleClass('waiting');
});

And then lay over something - in the top corner / is this font-awesome specific? / is there an hourglass-version of 'balance-scale' ? I don't know. I couldn't get .fa-balance-scale to work...

.icon-list {
  padding: 1rem;
}

.fa.waiting {
  position: relative;
}

.fa.waiting:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: 'x'; /* whatevers */
  color: red;
  transform: translate(50%, -50%);
}

This logic should work for any type of graphic inclusion. Icons fonts were great when they were the best option, but that is no longer the case. Take a look at fontastic or something that will spit out a sprite sheet. : )

Subscript and superscript alignment using only HTML markup

No, it is not possible to have sub- and superscript for an element at the same time using only HTML.

However, using CSS, there are solutions. For inspiration, have a look at this thread.

Edit: Source.



The HTML Subscript Element () defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.

[...]

The  HTML element that produces superscript. Note that you cannot
use them both at the same time and you need to use MathML to produce
both a superscript and a subscript next to the chemical symbol of an
element, representing its atomic number and its nuclear number.

Also note the following remark about  from the same page:

This element should be used for typographical reasons only, i.e.
changing the position of the text changing its meaning like in
mathematical (like t2, though the use of a MathML formula should be
considered) or chemical formulas (like H2O).

Superscript in CSS Only