superscript first item in piece of text with css_问答_开发者

superscript first item in piece of text with css

开发者 https://www.devze.com 2023-03-01 04:51 出处：网络

I want to superscript the fir开发者_如何学运维st character of this text with css $50.00 so that the $ is only half the height of the rest of the text.

How can I do this with css? Is there any way of being able to pick the first symbol in a piece of text and superscript it with css?

span.price:before{ content:'$'; font-size:xx-small; vertical-align:top; }

This will make:

<p>The current price is <span class="price">100.0</span></p>

Into:

The current price is $100.0

Except that $ will be superscript.

Edit: I tested it again and can confirm the above works. However all browser does not support before and after in css.

Otherwise you could just do it with html like this:

<p>The current price is <sup class="price">$</sup>100.0</p>

Proof of concept markup for both solutions:

<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <title>Price test</title> 
    <style>
        span.price:before{ content:'$'; font-size:xx-small; vertical-align:top; }
    </style>
</head> 
<body>
    <p>The price is <span class="price">100.0</span></p>
    <p>The price is <sup>$</sup>100.0</p>
</body></html>