Animated text underline in CSS only

Nureon — Mon, 08 Jul 2024 18:06:57 +0000

.animated-underline {
    position: relative;
    text-decoration: none;
}

.animated-underline::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 100%;
    height: 0.125em;
    background-color: hsl(200deg, 100%, 50%);
    transition: transform 320ms ease;
    transform: translate(-50%, 0%) scaleX(0);
    transform-origin: right;
}

.animated-underline:hover::after {
    transform-origin: left;
    transform: translate(-50%, 0%) scaleX(1);
}

Install google fonts using terminal.

Nureon — Fri, 05 Jul 2024 06:42:20 +0000

Repository https://github.com/nureon22/gfont

I created a python project to install google fonts directly from terminal. It also allows packing woff2 fonts to use in websites as locally hosted fonts. It works on Linux and macOS. Windows is not supported yet because I don't know to register fonts on Windows.

DEV Community: Nureon

Animated text underline in CSS only

Install google fonts using terminal.