CSS "Tristate with hold" Like (off) / Liked (on) / Unlike (on & hover, but not right away)

challenge.md

via: https://twitter.com/mikesherov/status/1106187591529975810

CSS challenge: make a pure CSS “tristate with hold” toggle

Requirements:
1. If off, show “like”
2. If on + no hover, show “liked”
3. If on + hover, show “unlike”
4. (The twist!) Right after toggling on, before unhovering, show “liked”

working.css

.tristate-like:after {
    content: "Like";
    padding-left: 15px;
}

@keyframes unlike {
    0%   { --unlike: "Liked"; }
    100% { --unlike: "Unlike"; }
}

.tristate-like:checked:after {
    content: "Liked";
    animation: unlike var(--time, 0s) step-end forwards;
}

.tristate-like:hover:checked:after {
    content: var(--unlike);
    --time: 1.0s;
}