Is there a way to create a continuous hover effect on links without the need for constant hovering to indicate that the text is a link? Currently, I have an effect where the cursor triggers an animation to underline the text when hovered over. However, I would like to make this effect always active in a loop. Can someone assist me with this?
.continuous-hover{
position:relative;
text-decoration:none;
}
.continuous-hover2{
position:relative;
text-decoration:none;
content:'';
position:absolute;
bottom:0;
right:0;
width:0;
height:2px;
background-color:red;
transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
-moz-animation:linky 2s infinite ease-in-out;
-webkit-animation:linky 2s infinite ease-in-out;
}
@keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
@-moz-keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
@-webkit-keyframes linky{
0%{
width:0%;
}
100%{
width:100%;
}
}
.continuous-hover::before{
content:'';
position:absolute;
bottom:0;
right:0;
width:0;
height:2px;
background-color:Red;
transition:width 0.6s cubic-bezier(0.25,1,0.5,1);
}
.continuous-hover:hover::before{
background-color:red;
left:0;
right:auto;
width:100%;
}
<a href="WWW.google.pt" class="T3Ccontinuous-hover"> this text will have a continuous border-bottom effect </a>