# Animated Underline for Links in Posts

> Replaces the plain underline on links inside post content with a thin line that thickens on hover, a subtle touch that keeps links easy to spot.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: links, typography, hover
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-animated-link-underline/

## Code

```css
.entry-content a:not(.wp-element-button):not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness 0.15s ease, text-underline-offset 0.15s ease;
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
    text-decoration-thickness: 3px;
    text-underline-offset: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
    .entry-content a,
    .wp-block-post-content a {
        transition: none;
    }
}
```

## Notes

Buttons are not affected. The transition is skipped for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Animated Underline for Links in Posts" 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/