-
On twitter.com
html <body style="--{{ current.slug }}: var(--active-nav);"> {% for page in nav %} <a style="--is-active: var(--{{ page.slug }});">👆 If the slugs match, var(--is-active) == var(--active-nav) for that link♻️ 1 Retweets ❤️ 12 Favorites Mood +1 🙂
-
Permalink On twitter.com
css body { --active-nav: 1; } a[style*="--is-active:"] { text-decoration-color: hsla(0, 0%, 0%, var(--is-active, 0)); }👆 Use var(--active-nav) as a toggle (in this case 1 or fallback to 0), and apply it to a toggled "active" style -
If you can set an .is-active class directly, I mean, that's simpler... But this works!Permalink On twitter.com