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 badges2 Answers
Reset to default 7The 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>