Hover effect whiout hovering-CodePudding

I want make this hover effect from links, make him continuos whitout need hovering to indicate that text is a link like. I have this effect, when hover te cursor some animation appear on a border bottom like underline, but I want make that effect always on in loop. Someone help me?

.efeitosublinhado{
  position:relative;
  text-decoration:none;
}
.efeitosublinhado2{
  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%;
  }
} 
.efeitosublinhado::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);
}
.efeitosublinhado:hover::before{
  background-color:red;
  left:0;
  right:auto;
  width:100%;
}

<a href="WWW.google.pt" class="T3Cefeitosublinhado"> this text will border bottom effect </a>

CodePudding user response：

Try to set animation in before :

.efeitosublinhado{
  position:relative;
  text-decoration:none;
}

@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%;
  }
} 
.efeitosublinhado::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:auto;
  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;
  animation:linky 2s infinite ease-in-out;
}

<a href="WWW.google.pt" class="efeitosublinhado"> this text will border bottom effect </a>