Animated Underline Grow
A copy-paste borders & outlines component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Borders & OutlinesHTMLCSSany framework
Hover to AnimateAlways ActiveAccent Variant
Copy into your project
HTML
<div class="nuda-bdx-uline-wrap">
<span class="nuda-bdx-uline">Hover to Animate</span>
<span class="nuda-bdx-uline nuda-bdx-uline--active">Always Active</span>
<span class="nuda-bdx-uline nuda-bdx-uline--accent">Accent Variant</span>
</div>CSS
.nuda-bdx-uline-wrap {
display: flex;
flex-direction: column;
gap: .8rem;
padding: 12px 16px;
background: #141414;
border-radius: 10px;
}
.nuda-bdx-uline {
position: relative;
display: inline-block;
color: #cfcfcf;
font-size: .9rem;
font-weight: 500;
cursor: pointer;
padding-bottom: 3px;
}
.nuda-bdx-uline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #777;
border-radius: 2px;
transition: width .35s cubic-bezier(.4,0,.2,1);
}
.nuda-bdx-uline:hover::after {
width: 100%;
}
.nuda-bdx-uline--active::after {
width: 100%;
background: rgba(255,255,255,.3);
}
.nuda-bdx-uline--accent {
color: #e4ff54;
}
.nuda-bdx-uline--accent::after {
background: #e4ff54;
}
.nuda-bdx-uline--accent:hover::after {
width: 100%;
}
How to use Animated Underline Grow
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.