superscript first item in piece of text with css
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>
加载中,请稍侯......
精彩评论