最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to implement transition effect for displaying underline on hovering a react router Link? - Stack Overflow

programmeradmin2浏览0评论

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.

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.

Share Improve this question edited Aug 7, 2018 at 5:31 user10004359 asked Aug 7, 2018 at 5:27 JEEVAN GEORGE ANTONYJEEVAN GEORGE ANTONY 1861 gold badge6 silver badges22 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

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./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>

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 bees 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>

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论