Ну, к сожалению, это не подходит для вашего собственного варианта использования, и это довольно очевидно, но вы можете сделать это для целых чисел от -999 до 999.
.currency:before{ content:'$'; }
.currency:after{ content: '.00'; }
<span class="currency">789</span>
Тогда, возможно, надоедливым решением, если вы работаете на стороне сервера, является преобразование вашего числа в обратную строку и цикл по каждому символу.Если вы действительно хотите, вы можете поместить символы в li, а css сможет выполнить необходимое форматирование следующим образом.Однако это невероятно бессмысленно, так как вы можете просто написать строку в этой точке.
.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>
Для еще более глубокого погружения в бессмысленные усилия вы можете добавить
<style> .currency:after{ content: '.00'; } </style>
над <ul>, что позволит вашему сценариюизмените десятичное значение в CSS, lol
Тем не менее, если вы захотите скрыть и использовать JavaScript, тогда CSS на самом деле может быть несколько полезен.Вы можете вывести обычный int или double (любой точности) и просто сделать JS разбить его на <li> s.