Webflow Underline Animation Tutorial | Webflow Text Hover Effects
In this video, I'll show how you how to create an animated underline effect on hover in Webflow. I'll show you two different options, a "no code" version and a "low code" version.
In this animation, we will have the underline start at 0% width and then once the mouse hover in, it will grow in length to 100%
The no-code version will be done all natively in Webflow and the low code version will use a little custom CSS and we will add the underline animation to our nav links.
CSS code snippet:
.nav_link {
display: inline-block;
position: relative;
}
.nav_link:after {
content: '';
position: absolute;
width: 0%;
height: 0.125rem;
bottom: 0;
left: 0;
background-color: #0c2954;
transition: width 0.5s ease-out;
}
.nav_link:hover:after {
width: 100%;
}
---------------------------
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
Tools/Resources I'm Currently Using :
💻 Apple 2023 MacBook Pro Laptop M3 chip
https://amzn.to/47iLnyh
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
https://library.relume.io/?via=brian
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉Semflow The #1 SEO tool for Webflow & Framer
https://bit.ly/3Zfaa3z
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
https://untitledui.lemonsqueezy.com?a...
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
On this page of the site you can watch the video online Webflow Underline Animation Tutorial | Webflow Text Hover Effects with a duration of hours minute second in good quality, which was uploaded by the user Brian Love 04 February 2023, share the link with friends and acquaintances, this video has already been watched 7,353 times on youtube and it was liked by 97 viewers. Enjoy your viewing!
