# 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.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: anchors, navigation, usability, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-highlight-jump-target/

## Code

```css
@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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Briefly Highlight the Section You Jumped To" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/