Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to format a number as currency using CSS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Given a number and the task is to format the number of an HTML element as currency using CSS and a little bit of JavaScript. It is not possible to complete the task with pure CSS. A bit of JavaScript is needed for the parsing of the number to add the commas.

Approach: In the code, the CSS class currSign adds the currency sign (like ‘$’) before the number. The JavaScript function toLocaleString() returns a string with a language-sensitive representation of the number. 

Example: In this example, we are using the above-explained approach.


    .currSign:before {
        content: '$';
<!-- Some unformatted numbers -->
<div class="myDIV">88123.45</div>
<div class="myDIV">75123.45</div>
<div class="myDIV">789415123.45</div>
<div class="myDIV">123</div>
<!-- Javascript code to format the
    number as per the locale -->
    let x = document.querySelectorAll(".myDIV");
    for (let i = 0, len = x.length; i < len; i++) {
        let num = Number(x[i].innerHTML)
        x[i].innerHTML = num;


My Personal Notes arrow_drop_up
Last Updated : 26 Apr, 2023
Like Article
Save Article
Similar Reads
Related Tutorials