# Marker-Pen Animation for Highlighted Text

> Animates highlighted text (the tag from the toolbar's Highlight option) with a marker stroke that sweeps across as the words scroll into view.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: highlight, animation, typography
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-animated-mark-highlight/

## Code

```html
<style>
.entry-content mark,.wp-block-post-content mark{--wpide-mark:#fde68a;background:linear-gradient(var(--wpide-mark),var(--wpide-mark)) no-repeat 0 85%/100% 45%;color:inherit;padding:0 .1em;}
@media (prefers-reduced-motion:no-preference){.wpide-mark-pending{background-size:0 45%!important;}.wpide-mark-animate{transition:background-size .8s ease;}}
</style>
<script>
(function () {
    var marks = document.querySelectorAll('.entry-content mark, .wp-block-post-content mark');
    if (!marks.length || !('IntersectionObserver' in window)) { return; }
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
    var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) { io.unobserve(entry.target); entry.target.classList.remove('wpide-mark-pending'); }
        });
    }, { threshold: 1 });
    marks.forEach(function (m) {
        if (m.style.backgroundColor) { return; }
        m.classList.add('wpide-mark-pending', 'wpide-mark-animate');
        io.observe(m);
    });
})();
</script>
```

## Notes

Change the marker color in --wpide-mark. Visitors who prefer reduced motion see the highlight without animation.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Marker-Pen Animation for Highlighted Text" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/