Fizz Buzz in CSS

Summary

Fizz Buzz in CSS By Susam Pal on 06 Dec 2025 What is the smallest CSS code we can write to print the Fizz Buzz sequence? I think it can be done in four lines of CSS as shown below: li { counter-increment: n } li:not(:nth-child(5n))::before { content: counter(n) } li:nth-child(3n)::before { content: "Fizz" } li:nth-child(5n)::after { content: "Buzz" } Here is a complete working example: css-fizz-buzz.html. I am neither a web developer nor a code-golfer. Seasoned code-golfers looking for a challenge can probably shrink this solution further. However, such wizards are also likely to scoff at any mention of counting lines of code, since CSS can be collapsed into a single line. The number of characters is probably more meaningful. The code can also be minified slightly by removing all whitespace: $ curl -sS https://susam.net/css-fizz-buzz.html | sed -n '/counter/,/after/p' | tr -d '[:space:]' li{counter-increment:n}li:not(:nth-child(5n))::before{content:counter(n)}li:nth-child(3n)::before{content:"Fizz"}li:nth-child(5n)::after{content:"Buzz"} This minified version is composed of 152 characters: $ curl -sS https://susam.net/css-fizz-buzz.html | sed -n '/counter/,/after/p' | tr -d '[:space:]' | wc -c 152 If you manage to create a shorter solution, please do leave a comment.