How can I use Webflow to underline the second span text within a text block when hovering, similar to the headings on a specific website?
TL;DR
- Wrap the second word in a span and assign it a unique class (e.g.,
underline-target). - Apply a hover interaction to the parent element targeting only child elements with the class, and animate a bottom border or text decoration to create the underline effect.
To underline the second span element on hover in Webflow, you’ll use combo classes and interactions. Here's how to target and animate only the second span inside a text block.
1. Prepare the Text Block with Spans
- Select your Text Block or Heading, then highlight the second word or phrase you want to style.
- Click “+ Add Span” to wrap it in a span.
- Repeat as needed for other parts of the text.
2. Assign a Unique Class to the Second Span
- Click directly on the second span (the one you want to underline on hover).
- In the Selector field, create and apply a custom class name (e.g.,
underline-target). - Keep the first span unstyled (or give it a different class if needed).
3. Create the Hover Effect with Interactions
- Select the parent element (e.g., a Text Block, Link Block, or Section) that wraps the spans.
- Go to the Interactions panel (lightning bolt icon).
- Click + Element Trigger > Mouse Hover.
- For the On Hover action:
- Choose Affect: Class.
- Select the
underline-targetclass. - Choose Only children with this class.
- Under Style changes, modify Border Bottom or Text Decoration to add the underline.
- Add easing and duration for smooth animation if desired.
- For the On Hover Out action:
- Reverse the style changes (remove the underline or reset previous styles).
4. Alternative: Use Border Animation
- Instead of standard underline, add a bottom border (e.g., 2px solid) to mimic an underline.
- Set initial state with border-width: 0px, and animate to 2px on hover.
- Add a background span for more advanced animations like scale or slide-ins.
Summary
To underline the second span on hover in Webflow, wrap it in a span, apply a custom class, and use a mouse hover interaction applied to the parent element. Target only children with that class to animate the underline specifically for the second span.