Pure CSS to achieve horizontal line animation under the element (background-image)

Effect picture:

html:

<div class='site_bar'>Home</div>
css:
.site_bar{
  background-image : linear-gradient(red,red);
  background-position : center bottom;
  background-size : 0 2px;
  background-repeat : no-repeat; //This attribute cannot be missing.
  transition : .3s;
}
.site_bar:hover{
  background-size : 100% 2px;
}

Summarize

The above is the pure CSS implementation of horizontal line animation (background-image) under the element introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!