There is a lower bound on the text, how to make it smoothly increase when moving from the center of a word to its edges?

enter image description here

So it should be, in the final result.

Thank you in advance!

  • It is not clear what exactly you mean in the phrase "the border will smoothly increase to the borders." The width of the underscore will increase from the center, or what? Try to explain in more detail, otherwise they already put out the minuses - Crantisz
  • Hello! Yes, the width of the underline will increase from the center of the word to its borders (as it is now in the picture). - Victor Biker

1 answer 1

Use the pseudo-element and compress-expand it in width when hovering:

Through transform :

 .link{ text-decoration:none; position:relative; } .link:before{ position:absolute; bottom: -10px; content: " "; border-bottom: 1px solid #ccc; transform: scale(0,1); width:100%; transition: transform 0.3s } .link:hover:before{ transform: scale(1,1); } 
 <a class='link' href='#'>Ссылка</a>

Through width :

 .link{ text-decoration:none; position:relative; } .link:before{ position:absolute; bottom: -10px; content: " "; border-bottom: 1px solid #ccc; left:50%; width:0%; transition: all 0.3s; } .link:hover:before{ width:100%; left:0% } 
 <a class='link' href='#'>Ссылка</a>