CSS - Link Underline Tutorial In 10 Minutes

IMPORTANT
Around the 6:51 mark, I said that the '::before' pseudo element inserted content 'before each a tag'. This was wrong, in this instance we are actually inserting content as the last child of the a tag. So inside it, not before it.


***

This tutorial will teach you how to add a ‘expand width’ animation effect on a link underline element. This animation will be triggered for the corresponding link upon a mouse hove event.


The technologies used in this video
• HTML
• CSS


If you enjoyed this video, then you would do me a huge favour if you liked the video and subscribed to my channel.

Post any questions or requests for elaboration in the comments box below. I will answer as many of them as I can to the best of my ability.

Тэги:

#qixotl_lfc #Qixotl #LFC #CSS #HTML #HTML_5 #Animating_Link_Underlines #https://tobiasahlin.com/blog/css-trick-animating-link-underlines/ #CSS_animation #CSS_how_to_animate_a_link_underline #How_to_animate_a_link_underline_in_CSS #text-decoration_animation_in_css #CSS_beginner_tutorial #How_to_animate_a_link_underline_using_html_and_css #make_underline_appear_smoothly_in_css #navbar_underline_animation_in_css #html_navbar_underline_animation #navbar_underline_animation_tutorial

Скачать видео