Computing and Displaying Discounted Prices in CSS

A practical demonstration of using modern CSS features to calculate and display discounted prices without JavaScript. The technique combines the upgraded attr() function (which now supports typed values like numbers), CSS math functions (calc(), mod(), round()), and CSS counters to compute a sale price from data-price and data-discount HTML attributes. The approach splits the computed decimal value into whole-dollar and cents counters to work around CSS counters' lack of decimal support. While attr() typed values aren't yet Baseline, the article shows what will soon be possible for e-commerce-style price displays purely in CSS.