How to implement transition effect for displaying underline on hovering a react router Link?

Question

I am using react-router-dom node package in my react project to implement routing.

After setting up the router links,I used following custom CSS to hide the link underline by default:

let styles = theme => ({
   TextLink: {
      position: 'relative',
      color: 'white',
      textDecoration: 'none',    
      '&:hover':{
            color: 'white',
      },
});

using this I was able to hide.

My objective is to make a link that will display underline on hovering with transition effect(Link underline grows from center to both ends).

Modified CSS or Code samples with any additional node packages would be helpful.

score 4 · Accepted Answer · answered Aug 07 '18 at 06:00

The following example is done in pure css.

Basically links in reactjs are a tags, hence u can use the following css

@import url("https://fonts.googleapis.com/css?family=Montserrat:500");
body {
  font-family: 'Montserrat', sans-serif;
}

ol,
ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 20px 0 20px;
}

a {
  text-decoration: none;
  position: relative;
  display: block;
  padding: 16px 0;
  margin: 0 12px;
  font-size: 1.2rem;
  text-transform: uppercase;
  transition: color 0.1s, background-color 0.1s;
  color: #000;
}
a:hover {
  color: #4dd0e1;
}
a:focus, a:active {
  color: #00bcd4;
}

a::before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  height: 3px;
  width: 100%;
  background-color: #00bcd4;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  transition: color 0.1s, -webkit-transform 0.2s ease-out;
  transition: color 0.1s, transform 0.2s ease-out;
  transition: color 0.1s, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

a:active::before {
  background-color: #00bcd4;
}

a:hover::before,
a:focus::before {
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

<nav>
  <ul>
    <li class=""><a href="#">home</a></li>
    <li class=""><a href="#">career</a></li>
    <li class=""><a href="#">projects</a></li>
    <li class=""><a href="#">about us</a></li>
    <li class=""><a href="#">contact us</a></li>
  </ul>
</nav>

score 1 · Answer 2 · answered Aug 11 '18 at 12:14

If you give the <a> a a display declaration of inline-block, you can then apply to it an ::after pseudo-element. The pseudo-element can be made to behave as a dynamic alternative to the conventional underline.

You can initially position the pseudo-element in the centre (using position: absolute; left: 50%;) and render it invisible by giving it a width of 0.

When the <a> is hovered over, you can update the position of the pseudo-element to left: 0; and give it a width of 100%.

If these two values are animated simultaneously, the pseudo-element will appear to grow outwards from the centre until it becomes a full-width underline.

Working Example:

a {
position: relative;
display: inline-block;
font-size: 16px;
line-height: 24px;
height: 24px;
color: rgb(0, 0, 191);
text-decoration: none;
}

a::after {
content: '';
position: absolute;
display: block;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
border-bottom: 2px solid rgb(255, 0, 0);
}

a, a::after {
transition: all 0.6s linear;
}

a:hover {
color: rgb(255, 0, 0);
}

a:hover::after {
left: 0;
width: 100%;
}

<a href="">Hover Me</a>

How to implement transition effect for displaying underline on hovering a react router Link?

2 Answers2