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.