p:after 内容标签内的上标

Question

.class {
    &:after {
        content: "m3/s";
    }
}

我想通过 :after 标签添加一个单元声明。是否可以制作 3 上标？

这显然行不通：

.class {
    &:after {
        content: "m<sup>3</sup>/s";
    }
}

Answer 1

您不能部分设置生成内容的样式（组合 :first-letter 和 :before 除外），所以不行。您可以改用 U+00B3 SUPERSCRIPT TREE：

.class {
    &:after {
        content: "m[=10=]B3/s"; /* Or content: "m³/s"; */
    }
}

...但我建议将其作为实际内容，如果它在语义上很重要，则使用 U+00B3、³ 或 <sup> 元素。

Answer 2

要使任何内容上标：

.class::after {
    content: "some content";
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

p:after 内容标签内的上标

Superscript inside a p:after content tag

css

pseudo-element

css-content