Advanced text highlight using inner shadow — Webflow tutorial

In this lesson, Sara teaches how to animate an underline to highlight over a text span on hover, using box shadows, states (specifically the hover and focused state), and an incredibly large amount of movie and TV show spoilers.

00:00 — Introduction
00:51 — Create the text link using spans
00:57 — Style the text link so it doesn't look like Craigslist
02:50 — Create the highlight effect
03:26 — Add the transition to interpolate between the underline and the highlight
04:36 — Use the same method to create spoiler text
06:28 — Recap & Grímur's rant about the ending of James Cameron's Titanic

----------

[BenFigueiredo]

Nice! I was trying to figure out how to do this effect. Thanks for being so committed to education!

[eightnine]

You guys are hilarious, this is the best way to learn 😂😂

[miguelmao]

Best duo right there! Nice feature btw.

[Anamaria.m]

What an video. Thank you so much for making such amazing videos to help us learn Webflow better.

[stevend]

hahahaha Grimur is the best. I shouldn't have LOL'd as much as I did for his jokes.

[UNPAVEDTV]

Please bring back the other guy too! He was like Van Wilder Ryan Reynolds I loved him!

[radiusdesignstudio]

Poor Sarah ...everyone asking about McGuire. You did a great job Sarah. Seriously. :)

Is there a way to increase the height of the box shadow past 20 pixels? Or to make it animate from left to right?

[MarcTiedemann]

I’m with Grimur. It’s a shame with the wood thing.

[fabianschierz]

Thanks. I applied the same effect to part of a H1 heading / page title. Had to turn it into a span. Does anyone know if this is bad for SEO somehow? Because ideally SEO title and page title should match - but if there is a span within the H1 - does this mess with SEO?

[tochidioka]

Awesome!!!! but how can I make a text in bold??

[semihdotcom]

Haha! Is it me or did Sara imitate Grimur's accent?

[world_changers]

Where is Maguire??? Please, believe it or not, I often watch your videos because of Maguire