html - CSS/HTML - 如何在 <input type ="button"/> 中写上标？

Question

假设我有这样的东西:

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

我想把“(8)”作为上标怎么办？

注意:我知道你可以这样做:

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

但我想没有那个...

Answer 1

您可以使用 ::after 伪类注入(inject)单独的样式。

CSS

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

HTML

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

使用 attr() 属性，您可以根据 data-superscript 属性动态更改上标值。

请注意，这是 CSS3，它不与所有浏览器兼容。

JSFiddle