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.
Opens WPIDE on
Code
.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 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.