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

Question

Let's say I have something like this:

    <input type="button" value="2(8)">

I want to have the "(8)" as a superscript how?

Note: I know that you can do it with:

     <button>2<sup>8</sup></button>

But I want to do it without that...

Answer 1

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

Answer 2

Use the unicode superscript 8 character, and make sure you're document is valid as UTF-8:

<input type="button" value="2⁸" />