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