Draw Underline Link Hover Effect | CSS Menu Hover Effect

Create an awesome underline link hover effect using CSS.

Download source code:

-----------------

❤️Get in touch:

-----------------

🎵Music:
Track: Falling Together — Artificial.Music & Syiphorous [Audio Library Release]
Music provided by Audio Library Plus

Intro Music:
Track: JPB - High [NCS Release]
Music provided by NoCopyrightSounds.

[filipfiser]

Instead of position absolute you can use display: block + margin: left. This works for me very well

[mysteriousguy]

Amazing!
Clutter-free code. I managed to overcome this obstacle in 5 mins only through you video.
Thanks a million ❤

[farhatulsk]

I am planning to give my father a birthday surprise by making a small birthday website🎉😊☺️

[TheMeepPlay]

it didnt work for me so after i try multiple things i found a solution, instead of position:absolute, display:block. And instead of a:after, a::after, in some new versions you need to use double :

[Jollyjoky]

This is amazing! A lot of value and content in 5 minutes!

[ChrisTRoll]

Your videos are great! I love your work!

[randomsshortz]

Nice bro thanks but how to fix overflow issue. Cause when website is live it's looking ugly because if you scroll sideways it shows another white screen with the nav items

[unlimitedtrends]

wow. beginner in learning web dev here and this worked first time without any problems thanks! :)

[mustafazeb]

thank u bro u solve my project problem so love u from the bottom of my heart

[element]

Thank you, I learnt so much for this tutorial.

[mestrow]

Hello! Excellent video! What is the name of the font used?

[TheJegan]

In the new version it only works if its a::after.

[mentalost]

Thanks this was exactly what i was looking for !

[dean]

Great effect. Only problem is, the link to download code takes you to a nightmarish zoo of 'download', 'download', 'download'. Way too much spam for me to risk.

[sizanahmed]

thanks a lot bro. i am highly benefitted by watching this tutorial

[SoulStitch]

a different way of on hover underline. I learned to use borders with 3 px etc.
How would you use this with a drop down menu, and how would you make it responsive for mobile? Thank you.

[HEY-T]

can i ask something about when you hovering a text to bold the text next to it moves because hovering the text makes the space expand, can you explain how to fix it so the text next to it wont move ? thanks

[berat]

very helpful tutorial straight to the point thank you

[SerhiiParkhomenkoFingerstyle]

Thank you so much! It's just amazing!

[michaelraymondlegg]

how to make the line stay underneath the nav heading whilst a dropdown menu is open? any solutions...