Animation of underline on hover for NavLink

As a newcomer to React, I am currently exploring how to create an animated underline effect when hovering over a NavLink from reactstrap. I have managed to get the underline working on hover thanks to the solution provided at , but I am struggling with implementing the animation.

All the examples I have come across utilize CSS pseudoelements such as ::before or ::after in vanilla DOM for similar effects, but my attempts to apply them in React have been unsuccessful.

If anyone has any suggestions or pointers on how to achieve this, I would greatly appreciate it!

cssreactjscss-animationsreact-bootstrap

Answer №1

To implement a hover effect, you can define a class with CSS styles for the hover state.

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; /*Adjust based on 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an infinite loop animation using GSAP in React results in a jarring interruption instead of a smooth and seamless transition

I'm currently developing a React project where I am aiming to implement an infinite loop animation using GSAP. The concept involves animating a series of elements from the bottom left corner to the top right corner. The idea is for the animation to sm ...

javascriptreactjsanimationnext.jsgsap

Randomly swap images in HTML when a button is clicked

In order to change images randomly on mouse click, I came across this solution: <SCRIPT LANGUAGE="Javascript"> function banner() { } ; b = new banner() ; n = 0 b[n++]= "<A HREF='index.html'><IMG SRC='images/pic1.jpg'> ...

jqueryhtmlcssimage

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

htmlcsstwitter-bootstrap

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

htmlcsstwitter-bootstrapbootstrap-5

Discovering the browser's language using NextJS' integrated i18n feature

Is it possible to incorporate language detection in Next.js using the default functionality, or will I need to rely on a third-party package? I wasn't able to locate any information about this in the documentation. I would like the initial language t ...

reactjsinternationalizationnext.js

You are limited to using a maximum of two custom tags within a custom div

I came up with this code that is supposed to style the elements differently based on their tag names. However, when I tested it, the styling did not work as expected. For example, 'London' should be displayed as a large and bold h1 text, while th ...

javascriptjqueryhtmlcssdom

What is the best way to immediately update react useState?

Whenever I invoke the fetchProducts function, I require the productPage state to be updated before proceeding to the next line of code as it's needed for subsequent operations. The issue lies in the fact that the state is only updated after the funct ...

reactjsreact-hooksnext.js

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect tha ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing npm serve for Location Proxy

Is it feasible to implement a location proxy while serving a react application using npm install -g serve; serve -s build? For instance, redirecting any requests from https://example.com/api/* to https://example.com:8000/api/* ...

node.jsreactjsnpmproxyserve

Assigning roles on signup with Auth0 in NextJS: A step-by-step guide

Recently, I've been exploring the library called nextjs-auth0 (https://github.com/auth0/nextjs-auth0) and have been attempting to utilize the handleAuth hook to extract a query argument for specifying the user's role upon signing up. Here is an ...

reactjsauthenticationnext.jsauth0

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

javascripthtmlcssword-wrap

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

csswordpressheadergraphical-logo

Encountered a challenge when attempting to substitute styles using classes in material-ui

While working on implementing a table using the TableRow component from material-ui, I encountered an issue with customizing the background color when the "selected" property is true. The default theme applies a pink background-color in such cases, but I w ...

cssreactjsmaterial-ui

Struggling to implement my reusable React component within a React Bootstrap modal

I have developed a reusable textarea React component: import React from 'react'; import '../form-input/form-input.styles.scss'; const TextAreaComponent = ({ handleChange, label, ...otherProps }) => ( <div className="group"> ...

javascriptreactjsecmascript-6react-bootstrapreact-bootstrap4-modal

Arranging elements in HTML for Manipulating with JavaScript

I haven't started coding yet, but I'm contemplating the overall strategy. My front end is primarily composed of HTML tables, giving it an Excel-like appearance. I am considering generating default pages and then using JavaScript to dynamically m ...

javascripthtmlcss

The syntax for importing JSON in JavaScript ES6 is incredibly straightforward and

Whenever I attempt to write my code following the ES6 standard and try to import a .json file, it ends up failing on me. import JsonT from "../../Data/t.json" //not functioning as expected var JsonT = require('../../Data/t.json'); //works fine ...

javascriptjsonreactjswebpack

Display only distinct dates in the ng-repeat list

I'm trying to display an unordered list created using ng-repeat. Each list item includes a month header and a blog post. I'm struggling to find a clean solution to only show one instance of each month name without resorting to complex jQuery hac ...

javascriptcssangularjsangularjs-ng-repeat

Guide to creating a continuous loop for CSS3 animation

I'm looking to create a setup that can play on repeat, but I'm not very familiar with jQuery. Can anyone lend a hand with this? Check out the DEMO here $('.title1').fadeIn('fast', function() { $('div').addClass ...

jqueryhtmlcssloops

What is causing the image to move to the following line?

(https://i.stack.imgur.com/5oi7s.png) The image appears to be shifting to the next line inexplicably. I have experimented with various methods to address this issue, including utilizing the built-in Image component which seemed to show improvement. However ...

cssreactjsimagenext.js

Contrasting local storage and session storage

After implementing user authentication using the passport local strategy with session storage, I have a question. Each time a user logs in, their session is stored both in the database and browser. In my frontend, would it be appropriate to use the user. ...

node.jsreactjsrestexpresspassport.js