Using CSS or other instead of js to display decimal as superscript

Question

I have a lot of:

<span class="price">17.998,80</span>

Customer wants me to replace with:

<span class="price">17.998<sup>80</sup></span>

...fine, lets javascript... BUT WAIT!

Could the equivalent result not be obtained via some fancy CSS/CSS trick?

(large $ figures, no decimal, superscript cents - , is my decimal delimiter)

Kind Regards,

Steen

NOTE: This works fine:

$('span.price').html($('span.price').html().replace(',','<sup>')+'</sup>');

BUT preference is to ALL CSS/CSS3 solution

Answer 1

The best way is to find all your price and add the HTML <sup> ... </sup> because if someone do not load javascript there is no HTML markup.

And there is no CSS trick to to that.

The only thing that CSS do is to apply a style to the <sup> element.

Answer 2

No, there is no CSS trick for the purpose: you cannot refer to digits after decimal point in content without turning them into an element.

A sup element is not really adequate for the purpose, since it puts characters in a superscript position so that they look like an exponent. A better approach is to generate

<span class="price">17.998<span class="cents">80</span></span>

and style it with

 .cents {
   font-size: 0.7em;
   position: relative;
   bottom: 0.25em;
 }