I’m trying to create a more interesting price display using CSS and I need a little help doing it. Anyone feeling helpful? Take the price £2,486.00. I’d like to split the currency symbol from the units (pounds) and the decimals (pence) where the decimals are displays smaller but aligned to the top of the text, almost like a <sup> but without using an actual superscript tag (as it wouldn’t be very semantic).
So far I’ve managed to split out the price into <spans> (I’d like to to keep it inline):
.price" wraps the whole thing
".currency" wraps the actual currency symbol (it can vary on my site between pounds, euros and we’ve the capability for dollars and yen)
".units" are whole pounds, euros, etc
".decimals" are anything after – and including – the decimal point (pence, cents, etc)
Here is an image preview of what I want to achieve
I’ve tried a few combinations but can never seem to get the whole thing aligned to the top. What would be the best way of aligning it cross-browser.