csspseudo-elementcss-content

Superscript inside a p:after content tag


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

I want to add a unit declaration via :after tag. Is it possible to make the 3 superscript?

This obviously doesn't work:

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

Solution

  • 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, &sup3; or the <sup> element if it is semantically important.