FizzBuzz in CSS?

[Jessica Brown]

Oh yeah, it can be done. A long time ago (2018ish), I challenged myself to create a FizzBuzz in every language I know. Honestly, this was easier than I expected.

Take a look at it on my CodePen:
https://codepen.io/jessicabrown1028/pen/ZMagPo

Here is the code:
CSS:

body {
  counter-reset: fizzbuzz;
  background-color: #1D1E22;
  width: 300px;
  margin: auto;
}

div {
  width: 75px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin: 10px 10px 0px 0px;
  padding: 5px;
  text-align: center;
  float: left;
	display: flex;
	flex-flow: row wrap;
}

div:after {
  color: bisque;
  content: counter(fizzbuzz);
  counter-increment: fizzbuzz;
  flex: 1;
}

div:nth-child(3n):not(:nth-child(5n)):after {
  content: "Fizz";
  color: darksalmon;
}

div:nth-child(5n):not(:nth-child(3n)):after {
  content: "Buzz";
  color: aquamarine;
}

div:nth-child(3n):nth-child(5n):after {
  content: "FizzBuzz";
  color: darkseagreen;
}

HTML:
 

<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>