效果图：

html： 

<div class="site_bar">首页</div>css:.site_bar{　　background-image : linear-gradient(red,red);　　background-position : center bottom;　　background-size : 0 2px;　　background-repeat : no-repeat;  //这个属性不能少。　　transition : .3s;}.site_bar:hover{　　background-size : 100% 2px;}

总结

以上所述是小编给大家介绍的纯css实现元素下出现横线动画（background-image），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网页设计网站的支持！