Briefly Highlight the Section You Jumped To
Flashes a soft highlight behind a heading or section when visitors arrive through a #link (from a table of contents or another page), so they instantly see where they landed.
Opens WPIDE on
Code
@media (prefers-reduced-motion: no-preference) {
:target {
animation: wpide-target-flash 2s ease-out 1;
}
}
@media (prefers-reduced-motion: reduce) {
:target {
outline: 2px solid currentColor;
outline-offset: 4px;
}
}
@keyframes wpide-target-flash {
0%,
30% {
background-color: rgba(253, 230, 138, 0.8);
box-shadow: 0 0 0 6px rgba(253, 230, 138, 0.8);
}
100% {
background-color: transparent;
box-shadow: 0 0 0 6px transparent;
}
}Notes
Change the highlight color in the keyframes. Visitors who prefer reduced motion get a static outline instead.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.