Design & Assets
Underline Link CSS Generator
Generate animated underline link CSS.
Input
Underline Link CSS Generator
link hoverunderline animationcssnavigation
Output
Underline Link CSS Generator
.underline-link {
position: relative;
color: #0f172a;
text-decoration: none;
font-weight: 700;
}
.underline-link::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: #38bdf8;
transform-origin: left;
transform: scaleX(0.15);
transition: transform 0.3s ease;
}
.underline-link:hover::after {
transform: scaleX(1);
}Live preview
Live canvas
Related tools
Hamburger Button CSS Generator
Generate CSS hamburger menu button styles.
Accordion CSS Generator
Generate accordion panel CSS.
Avatar Stack CSS Generator
Generate overlapping avatar stack CSS.
Baseline Grid Generator
Generate baseline grid specs and CSS for vertical rhythm.
Blob Shape CSS Generator
Generate organic blob CSS shapes.
Border Radius Generator
Generate border-radius CSS from corner values.