我将如何在此网站上为导航创建悬停动画？

Question

The website is https://ceremonycoffee.com/ . How do I replicate their nav hover animation with the underline? I can't really find it in their inspect element. Also, is it made from CSS or Javascript? Thank you!

Answer 1

You can do it in full css, see this snippet :

 h2 > a { position: relative; color: #000; text-decoration: none; } h2 > a:hover { color: #000; } h2 > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } h2 > a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <h2><a href="#">My Link</a></h2> 

It relies on the ::before pseudo element. You set its horizontal scale to zero, add a transition property so that when hovered it transforms smoothly to the full link scale.

Source and explanation : Animating Links Underline