NavLink underline animation on hover

Question

I'm pretty new to react and trying to figure out how to animate an underline when a NavLink (from reactstrap) is hovered over like this:

From https://stackoverflow.com/a/71937754/2246411 I was able to get underline working on hover, but not with the animation.

All the examples I see of how to accomplish something similar in vanilla DOM use CSS pseudoelements ::before or ::after, but from what I've tried, those don't seem to work in React.

Any suggestions?

You can find your desired animation here https://codepen.io/jltk/pen/dMvGvG and if you want to check more designs you can find those herehttps://tympanus.net/Development/LineHoverStyles/ — Vijay Hardaha, Sep 09 '22 at 04:29

score 0 · Answer 1 · answered Sep 09 '22 at 04:44

You can use a class name and apply :hover as usual CSS styles.

const App = () => {
  return <a className="nav-item">Hover to see change</a>
}

ReactDOM.render(<App />, document.getElementById("root"));

.nav-item {
  position: relative;
}

.nav-item:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  margin: -5px 0;
  background-color: black; /*Follow your text color*/
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.4s ease-in-out 0s;
}

.nav-item:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

NavLink underline animation on hover

1 Answers1