Computing and Displaying Discounted Prices in CSS

CSS math isn’t just about how things look! It can also be used to work out useful numeric information. For instance, you could calculate and show the percentage of tasks completed in a to-do list with CSS, helping users keep track of their progress. No need for script or server computation. No latency. No use of additional browser resources. Working with math has become much simpler and more flexible. I’m going to give you an example using CSS to calculate and display a discounted price whenever you need it, using the base price and discount provided. It’s the sort of thing you see often on e-commerce sites where heavy JavaScript is used to show a product’s full price, its discount amount, and its sale price. Screenshot taken from gap.com We can absolutely do that in CSS: CodePen Embed Fallback It does rely on some bleeding-edge features that are waiting to gain more browser support, but I think it’s still a good exercise to dig into how we will eventually be able to put these things in practice and eventually use them in our everyday work. Here’s how I put it together. The initial markup The interface in this specific demo displays a list of streaming services for the user to choose from — Netflix, Disney+, HBO , HBO Now , HBO Go , HBO Max, etc. There’s a student discount offer on each subscription that takes a certain percentage amount off the full price.

Netflix

$7.99

Apply Student Discount
20%

The base price and discount are included as data-* attributes in the element displayin