Skip to content

Instantly share code, notes, and snippets.

@danielpost
Last active May 21, 2023 08:24
Show Gist options
  • Save danielpost/a0fa9d9046a885692346137b68babd54 to your computer and use it in GitHub Desktop.
Save danielpost/a0fa9d9046a885692346137b68babd54 to your computer and use it in GitHub Desktop.
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