Home/ Questions/Q 4562154
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T18:10:32+00:00

I want to superscript the first character of this text with css $50.00 so

  • 0

I want to superscript the first 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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>
    • 0