How to make animated text underline on hover
I was able to apply background-image
to snap to :hover
and now want it to animate at the same time. How can I achieve this?
.nav-content ul li a {
display: inline-block;
padding: 5px 0;
text-decoration: none;
color: #fff;
}
.nav-content ul li a:hover {
text-decoration: none;
background: url('dotted.gif') bottom repeat-x;
}
Clarification of my question:
What I'm trying to achieve is that the underline image dotted.gif
should animate on the X axis continuously on hover. While it only appears on hover
source to share
You can do this with transition
and opacity
for the attenuation in / fade out, and animation
and background-position
to move the cursor along the axis X, try this :
.link {
position: relative;
display: inline-block;
padding: 5px 0;
text-decoration: none;
color: #000;
}
.link:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: url('http://oi62.tinypic.com/256wzvb.jpg');
background-size: 120px 120px;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-animation: x-move 5s linear infinite;
animation: x-move 5s linear infinite;
}
.link:hover {
text-decoration: none;
}
.link:hover:after {
opacity: 1;
}
@-webkit-keyframes x-move {
0% { background-position: 0 0; }
100% { background-position: 120px 0; }
}
@keyframes x-move {
0% { background-position: 0 0; }
100% { background-position: 120px 0; }
}
<a class="link" href="#">Test link</a>
source to share
Something like that?
.link {
position: relative;
display: inline-block;
padding: 5px 0;
text-decoration: none;
color: #fff;
}
.link:after {
content: '';
height: 1px;
display: block;
border-bottom: 1px dotted #e0d16c;
width: 0;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.link:hover {
text-decoration: none;
}
.link:hover:after {
width: 100%;
}
<div style="background: black; width: 200px; height: 100px; padding: 10px;">
<a class="link" href="#">Test link</a>
</div>
source to share