Social proof section using Flexbox

S.T.A.R.S!!!! ⭐⭐⭐⭐⭐ (Nemesis says)

HI!

Here is my solution for this exercise.

What cost me the most were the stars. ⭐

I wanted to avoid having to write 5 image elements in each rating div.

<div class=rating>
  <img src="star.png">
  <img src="star.png">
  <img src="star.png">
         ....

I inquired about defining counting patterns, and I came up with the following, a very elegant solution using my counting pattern with a single symbol (star), the value attribute, the functions:attr(),counter() and the pseudo element before. ...

@counter-style stars
{
    system:symbol;
    symbols: ' ⭐ ';

}

.ratings
{
counter-reset:starCount 0;
}

.rating-card__rating::after
{
    counter-set: starCount attr(value); //If this line worked it would be perfect, but no.
    content: counter(starCount,stars);
}

It didn't work (at least not in the automatic way I wanted with the function attr() ) I finally decided to use attribute selectors (using the value attribute).

Any suggestion is welcome! :)