I have remembered an old easter egg in my website, and decided to try recreating it using CSS counters, which I have recently learned about. Here’s some CSS:

@counter-style rainbow-hearts {
    system: cyclic;
    symbols: "❤️" "🧡" "💛" "💚" "💙" "💜";
}
body {
    counter-reset: like-icons;
}
span.like-icon::before {
    counter-increment: like-icons;
    content: "" counter(like-icons, rainbow-hearts);
}
span.like-icon-label {
    display: none;
}

Using it with the following HTML will do the trick:

<span class="like-icon" aria-label="liked"><span class="like-icon-label" aria-hidden="true">❤️</span></span>

I tried to make it compatible with screen readers and allow for a fallback icons for browsers not supporting counters (apparently text browsers don’t do a lot of CSS). This also means the CSS snippet can be excluded from the CSS sent to the browser if you don’t like having fun.