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 span of text in a Webflow text block using the +Span tool and assign it a unique class (e.g., underline-span).
- Set its border-bottom to 1px solid transparent, then use interactions on the parent text block to change the border color on hover for the targeted span.
To underline only the second span of text within a Webflow text block on hover, you’ll need to structure your content with spans and target them using Webflow’s interactions.
1. Structure the Text with Multiple Spans
- Double-click your text element (e.g., a Heading or Paragraph) in the Webflow Designer.
- Highlight the portion of text you want as the "second span".
- Click the +Span button in the text toolbar to wrap it in a span.
- Highlight the rest of the text as needed and span it as well (you'll need multiple spans for targeting).
2. Label the Second Span with a Class
- Select the second span.
- In the Style panel, add a class name (e.g.,
underline-span). - This is necessary to uniquely target the second span for interaction.
3. Set Initial Span Styling
- With the
underline-spanclass selected, go to the Style panel. - Set Border Bottom: 1px solid transparent to simulate underline space without showing the underline yet.
- Optionally, use transition settings (like
all 200ms ease) for a smoother effect.
4. Create the Hover Interaction
- Select the parent text block or container where the hover should trigger.
- Go to the Interactions panel (lightning icon).
- Add a Mouse Hover (Hover In / Hover Out) interaction.
- On Hover In:
- Select the span with the
underline-spanclass. - Apply a style animation to change border-bottom color (e.g., from transparent to black).
- On Hover Out:
- Revert the border-bottom color to transparent.
5. Important Interaction Targeting Tips
- If the second span is deeply nested or hard to select in the interactions panel, give it a unique class and make sure it's visible and selectable.
- Webflow interactions target elements by class, so ensure only this span has that class if you want it to behave independently.
Summary
To underline only the second span in a Webflow text block on hover, wrap that portion in a span, assign it a unique class (like underline-span), set a transparent underline style, and use Webflow interactions to reveal the underline on hover of the text block.
