Instantly share code, notes, and snippets.

Embed
What would you like to do?
Highlight focused footnotes
@keyframes highlight {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.footnotes li,
.footnote-ref {
position: relative;
&::after {
position: absolute;
z-index: -1;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
-100deg,
rgba(#fae885, 0.3),
rgba(#fae885, 0.6) 95%,
rgba(#fae885, 0.1)
);
opacity: 0;
}
&:target,
&:focus {
&::after {
animation: highlight 2s cubic-bezier(0.3, 0, 1, 0.7);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment