html - CSS/HTML - 如何在 中写上标？

Question

假设我有这样的事情：

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

我想将“（8）”作为上标如何？

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

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

但我想在没有那个的情况下这样做......

Answer 1

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

CSS

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

HTML

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

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

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

JSFiddle

Answer 2

使用 unicode 上标 8 字符，并确保您的文档作为 UTF-8 有效：

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