Formatting a number as currency using CSS

Html Problem Overview

Just wondering if anyone knows whether it is possible to format the content of an element as currency using only CSS. It would be nice to have how the value is presented in CSS if possible, can't find anything though so I'm not holding my breath :)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .dollars:before { content:'$'; }
    </style>
</head>
<body>
    Pure CSS: <span class="dollars">25153.3</span>
    <br />
    Ideal format: <span>$25,153.30</span>
</body>
</html>

That example comes out as:

Pure CSS: $25153.3

Ideal format: $25,153.30

Also I'm aware that it's fairly trivial using javascript - http://css-tricks.com/snippets/javascript/format-currency/.

Html Solutions

Solution 1 - Html

The currency format can be achieved with CSS and a bit of Javascript which is needed for the parsing of the number to add the commas. A CSS class adds the additional styling like negative (red) or currency sign (i.e. $ Dollar sign). The approach is a follows:

Convert the value to number (adds the commas based on the locale)

Number(value).toLocaleString('en');
Add a class to determine if it is negative or positive value (i.e. red color)

.enMoney::before { content:"$"; } .negMoney { color:red; }

See more detail here with the sample code and css:

http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html

Solution 2 - Html

var number = 25153.3; console.log(number.toLocaleString()); /------

var number = 25153.3;
result="$ " + number.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})
console.log(result);

console.log(); //---------------------------------------------------

// request a currency format console.log(number.toLocaleString('us-US', { style: 'currency', currency: 'USD' })); // → $ 251,52.30

console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); // → 25.152,30 €

// the Japanese yen doesn't use a minor unit console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) // → ￥251,53

Solution 3 - Html

If you're asking about number formatting in CSS (that is, parsing a number from a string and then formatting it with thousands separator, decimal separator, fixed decimal digits number etc), then no, it is impossible in CSS, and this is not what CSS was designed for.

If you want to do any formatting, then you'd better to use XSLT. For example:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="span[@class='dollars']">
        <span>
            <xsl:text>$</xsl:text>
            <xsl:value-of select="format-number(current(), '###,###.00')"/>
        </span>
    </xsl:template>

    <xsl:template match="@* | node()">
        <xsl:copy>
            <xsl:apply-templates select="@* | node()"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

Solution 4 - Html

Well, this doesn't fit your own use case unfortunately, and it's fairly obvious, but you could do this for integer numbers from -999 to 999.

.currency:before{ content:'$'; }
.currency:after{ content: '.00'; }

<span class="currency">789</span>

Then, a possible, annoying, solution if you're working server side, is to convert your number to a reversed string and loop over each character. If you really wanted you could place the characters into li's and css could then do the formatting you wanted as follows. However this is incredibly pointless as you may as well simply author the string at that point.

.currency li:before{ content: ' ,';}
.currency li:first-child:before{ content:'$' !important; }
.currency *{ display: inline-block; }
.currency, .currency > *{ display: inline-block; }
.currency:after{ content: '.00'; }

<ul class="currency"><li>123</li><li>456</li><li>789</li></ul> 
<ul class="currency"><li>456</li><li>789</li></ul> 
<ul class="currency"><li>789</li></ul>

For an even deeper dive into pointless effort, you could prepend a

<style> .currency:after{ content: '.00'; } </style>

above the <ul>, allowing your script to change the decimal value in CSS, lol

Still, if you were to cave and use JavaScript, then the CSS may actually be somewhat useful. You can output a plain int or double (any precision) and just have JS break it into <li>s.

Content Type	Original Author	Original Content on Stackoverflow
Question	Daniel Imms	View Question on Stackoverflow
Solution 1 - Html	ozkary	View Answer on Stackoverflow
Solution 2 - Html	Timothy Nwanwene	View Answer on Stackoverflow
Solution 3 - Html	penartur	View Answer on Stackoverflow
Solution 4 - Html	That Realty Programmer Guy	View Answer on Stackoverflow