鼠标经过时底部出现线条

前两天周末，有事就没能更新博客。
今天我们就来说说当鼠标放置在盒子上时，底部出现一个由中间延长到两边的线条。话不多说，直接开始。
首先，我来对这个功能进行分析，出现和隐藏那就需要用到display属性，关于display属性，大家可以看看我之前写的相关博客：https://blog.csdn.net/weixin_45369499/article/details/100578170，里面有相关介绍。
其次得使用进度条动画效果来制作，用到transition过渡属性。
首先html部分代码：

<div class="nav">
	<div class="nav1"><a href="#">首页</a><div class="line1"></div></div>
	<div class="nav2"><a href="#">企业概况</a><div class="line2"></div></div>
	<div class="nav3"><a href="#">产品中心</a><div class="line3"></div></div>
	<div class="nav4"><a href="#">新闻资讯</a><div class="line4"></div></div>
	<div class="nav5"><a href="#">服务中心</a><div class="line5"></div></div>
	<div class="nav6"><a href="#">投资者关系</a><div class="line6"></div></div>
	<div class="nav7"><a href="#">茅台商城</a><div class="line7"></div></div>
</div>

然后css部分代码：

    .nav{width: 100%; background-color: floralwhite; float: right; text-align: center;}
    .nav1, .nav2,.nav3,.nav4,.nav5,.nav6,.nav7,.nav8{float: left; width: 12.5%; text-align: 4rem;font-size: 1.6rem;padding-top: 1rem;}
	.nav1 a{color:  darkred;font-weight:bold;}
	.nav2 a,.nav3 a,.nav4 a,.nav5 a,.nav6 a,.nav7 a,.nav8 a{color: black;}
	.nav2 a:hover,.nav3 a:hover,.nav4 a:hover,.nav5 a:hover,.nav6 a:hover,.nav7 a:hover,.nav8 a:hover{color:  darkred;font-weight:bold;}
	.line1, .line2,.line3,.line4,.line5,.line6,.line7{
        width:0%;/*宽度*/
        height:0.2rem;/*高度*/
        border-radius:0.5rem;/*圆角*/
        background-color: #8B0000;
        margin:0 auto;
        align-content: center;/*内容居中*/
        transition:width 0.5s linear;/*transition:<过渡属性名称> <过渡时间> <过渡模式>
模式1.ease 逐渐变慢
2.linear 匀速
3.ease-in 缓慢开始（加速）
4.ease-out 缓慢结束（减速）
5.ease-in-out 缓慢开始，缓慢结束（先加速后减速）
6.cubic-bezier 贝塞尔曲线（matthewlein.com/ceaser）*/
    }
    .nav1:hover .line1,.nav2:hover .line2,.nav3:hover .line3,.nav4:hover .line4,.nav5:hover .line5,.nav6:hover .line6,.nav7:hover .line7{width:100%;}

完成鼠标经过时底部出现线条的制作。