CSS Snippet:
Animated Underline Text
This CSS snippet adds an animated underline that grows beneath heading text, creating a clean and modern emphasis effect.
The movement is subtle but effective, making it a strong option for headings that need a bit more visual energy without changing the text itself.
Difficulty:
Intermediate
Live preview
Animated Underline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this text style when you want a heading to feel more interactive or highlighted without applying a full text effect.
It works particularly well for section titles, feature headings, and statements that need a little extra emphasis.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Section titles
• Feature headings
• Highlighted statements
• Modern landing page layouts
This style works best when you want a decorative effect that still feels clean and restrained.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: animated-underline-text
Paste the CSS into your site's Custom CSS section.
You can change the underline thickness, offset, and colours to match your design.
Customisation
Animation Speed:
Adjust the timing here:
animation: underlineReveal 2.4s ease-in-out infinite alternate;
Lower values = faster animation
Higher values = slower, more subtle movement
Underline Thickness:
Adjust the thickness here:
height: 0.14em;
Underline Position:
Adjust the gap below the text here:
bottom: -0.12em;
Tip:
This effect is more restrained than full animated text, so it works well when you want motion without too much visual noise.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
/*
Animated Underline Text
Apply class: animated-underline-text
*/
.animated-underline-text {
position: relative;
display: inline-block;
}
.animated-underline-text::after {
content: "";
position: absolute;
left: 0;
bottom: -0.12em;
width: 100%;
height: 0.5em;
border-radius: 999px;
background: linear-gradient(90deg, #6366f1, #06b6d4, #ec4899);
transform: scaleX(0);
transform-origin: left;
animation: underlineReveal 2.4s ease-in-out infinite alternate;
}
@keyframes underlineReveal {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
