How to Master Hover Underline Animations in Webflow

This tutorial provides a sophisticated guide to elevating standard web design by replacing static borders with dynamic, smooth-growing underline animations in Webflow. Presented by Franchesco from SupaSaito, the lesson moves beyond basic styling to explore the creative power of inner box shadows combined with CSS transitions. By mastering these properties, designers can create elegant interactive elements that respond fluidly to user engagement without writing a single line of custom code.

The curriculum follows a structured progression, beginning with the fundamental "growing from the bottom" effect before expanding into complex variations. Viewers are guided through manipulating X and Y offsets to control animation direction—creating effects that slide in from the top, left, or right. The tutorial deepens the learning curve by introducing full-height background fills, teaching the precise mathematical relationship between font size and line height required to calculate perfect fill dimensions using viewport width (VW) units.

By the conclusion of this video, you will possess a versatile toolkit of interaction patterns applicable to links, containers, or sections. The session culminates in a "bonus" segment demonstrating how to layer multiple box shadows to animate several borders simultaneously, providing a comprehensive understanding of how to construct complex, multi-directional hover states. This approach ensures your projects maintain a polished, high-end aesthetic with highly reusable CSS classes.

• Leverage Box Shadows for Fluidity: Instead of using standard borders, apply an inner box shadow with a transition duration (e.g., 600ms) and easing (e.g., ease-out-cubic) to achieve a smooth, growing line effect that feels organic and high-quality.
• Directional Control via Offsets: You can dictate the origin of the animation by manipulating the Box Shadow's X and Y offsets in the hover state. For example, a negative Y offset grows the line from the bottom, while a positive Y offset grows it from the top.
• The Formula for Full-Height Fills: To create an effect where the underline fills the entire element height, you must calculate the specific offset based on your typography settings. The formula is Font Size × Line Height (e.g., 7vw×1.5=10.5vw).
• Structural Spacing is Critical: For animations growing from the left or right, or for full-height fills, adding specific padding to the element is essential. This ensures the text retains "breathing room" and the resulting animation does not crowd the content.
• Layering for Complex Interactions: The logic is scalable; you can apply multiple box shadows to a single element to animate opposite sides simultaneously (e.g., expanding both top and bottom borders at once) by setting distinct offsets for each shadow within the same class.

• 02:40 - Select the link element and apply the class section underline-link.
• 02:49 - Set typography color to "inherit" and remove the default underline by setting text-decoration to "none".
• 03:04 - Add an inner Box Shadow with X, Y, Blur, and Spread properties all set to zero.
• 03:28 - Add a transition specifically to the Box Shadow property with a duration of 600ms and "ease-out-cubic" easing.
• 04:00 - Configure the Hover state: Set the Box Shadow Y-offset to a negative value (e.g., -1 VW) to make the line grow from the bottom.
• 05:29 - Create a top-growing variation: In the Hover state, change the Box Shadow Y-offset to a positive value (e.g., 1 VW).
• 06:00 - Prepare for side animations: Add specific padding (e.g., 1.5 VW) to the element to make room for the incoming line.
• 06:17 - Create a left-growing variation: In the Hover state, keep Y-offset at 0 and set the X-offset to 1 VW.
• 06:56 - Create a right-growing variation: In the Hover state, set the X-offset to -1 VW.
• 08:13 - Prepare for full-height fill: Add horizontal padding to the element to give text "breathing room" inside the fill.
• 09:02 - Calculate full-height offset: Multiply Font Size (7 VW) by Line Height (1.5) to determine the exact Box Shadow Y-offset (10.5 VW).
• 10:56 - Setup multi-border animation: Add two identical inner shadows to the element in the Normal state.
• 11:02 - Animate multiple borders: In the Hover state, adjust the Y-offsets of the shadows in opposite directions (e.g., one to 1 VW, the other to -1 VW).

Technical Guide: Advanced CSS Underline Animations

Overview: This guide details how to replace standard static borders with fluid, animating lines using Inner Box Shadows and CSS transitions. This method requires no custom code and relies on manipulating X and Y offsets.

Step 1: Base Link Configuration

Timestamp: 02:40 – 03:04

• How: Select your link element and apply a base class (e.g., section underline-link). In the Typography settings, set the Color to "Inherit" and the Text Decoration to "None" (removing the default browser underline).
• Why: Setting the color to inherit ensures the link adopts the parent text color seamlessly. Removing the default underline is necessary because we are replacing it with a custom, animatable box shadow.

Step 2: Initialize the Box Shadow

Timestamp: 03:04 – 03:28

• How: With the link selected in the "Normal" state, add a Box Shadow. Set the Type to Inner. Set the Angle, Distance, Blur, and Size all to 0. Choose your desired underline color (e.g., Webflow Blue).
• Why: This initializes the shadow on the element without making it visible yet. It acts as the starting point (origin) for the animation.

Step 3: Configure the Transition

Timestamp: 03:28 – 03:52

• How: Scroll to the Transitions panel. Add a transition specifically for the Box Shadow property. Set the Duration to 600ms and the Easing to ease-out-cubic.
• Why: Applying the transition only to the box shadow ensures the animation is fluid. A longer duration (600ms) with cubic easing creates a sophisticated, organic feel rather than a mechanical on/off switch.

Step 4: Create the "Grow from Bottom" Interaction

Timestamp: 04:00 – 04:25

• How: Switch the selector state to Hover. Modify the Box Shadow settings by changing the Y-offset (Distance) to a negative value. If using fluid typography, match the unit (e.g., 1 VW).
• Why: In an Inner Box Shadow, a negative Y-offset pulls the shadow upward from the bottom edge, creating the illusion of an underline growing vertically.

Step 5: Variation – "Grow from Top"

Timestamp: 04:47 – 05:46

• How: To reverse the direction, use a combo class (e.g., CC-top). In the Hover state, set the Box Shadow Y-offset to a positive value (e.g., 1 VW).
• Why: A positive Y-offset pushes the inner shadow downward from the top edge. This creates a "ceiling" border effect rather than a floor.

Step 6: Variation – "Grow from Sides" (Left/Right)

Timestamp: 05:52 – 07:11

• How:

1. Add specific Padding (e.g., 1.5 VW) to the side of the element where the line will appear.
2. In the Hover state, keep the Y-offset at 0.
3. For a Left-growth: Set the X-offset to a positive value (e.g., 1 VW).
4. For a Right-growth: Set the X-offset to a negative value (e.g., -1 VW).

• Why: The padding is critical to provide "breathing room" so the incoming vertical line does not overlap the text. The X-offset controls horizontal movement.

Step 7: The Full-Height "Fill" Animation

Timestamp: 07:26 – 09:44

• How:

1. Add horizontal padding to the element for visual balance.
2. Calculate the required height using this formula: Font Size × Line Height.
3. Example: If Font Size is 7 VW and Line Height is 1.5, the target is 10.5 VW.
4. In the Hover state, set the Box Shadow Y-offset to -10.5 VW (or the result of your calculation).
5. Change the Typography Font Color to white (or a contrasting color) on Hover.

• Why: Box shadows do not accept percentage-based heights (like 100%). You must manually calculate the exact coverage based on your typography settings to ensure the shadow completely fills the element.

Step 8: Bonus – Multi-Border Animation

Timestamp: 10:37 – 11:18

• How: In the "Normal" state, add two separate Inner Box Shadows (stacked in the effects panel). In the Hover state, adjust their offsets in opposite directions.‍
  
  • Example: Set Shadow 1 Y-offset to 1 VW (Top) and Shadow 2 Y-offset to -1 VW (Bottom).

• Why: This allows you to animate multiple borders simultaneously using a single HTML element, creating complex framing effects without adding extra divs.

To achieve a smooth growing effect without custom code, replace standard borders with an inner Box Shadow. Set the shadow's initial size to zero, apply a transition (e.g., 600ms ease-out-cubic), and in the Hover state, adjust the Y-offset to a negative value (like -1vw) to make the line grow upwards from the bottom.

You can control the direction of the animation by manipulating the X-offset of an inner Box Shadow. Add padding to your element to create structural space, then in the Hover state, set the X-offset to a positive value (e.g., 1vw) to slide in from the left, or a negative value to slide in from the right.

To create a hover effect that fills the entire element height, calculate the Box Shadow Y-offset by multiplying your Font Size by the Line Height. For example, if your font size is 7vw and line height is 1.5, set the hover Y-offset to 10.5vw to ensure the shadow perfectly covers the text.

You can animate multiple sides at once by stacking multiple inner Box Shadows within the same class. In the Hover state, assign different offset values to each shadow—such as a positive Y-offset for the top and a negative Y-offset for the bottom—to make them expand in opposite directions simultaneously.