利用动画效果制作网页中的动态下划线

1、需求：我们在网页浏览的时候，某个标签，当鼠标放上去出现一个从左向右的动态下划线。
2、关键知识点：定位；伪元素；动画。
3、解题思路：
第一步：需要一个a标签，格式转成行内块格式，取消默认下划线。
a {display: inline-block;【用于设置宽高，边框等属性】
text-decoration-line: none;
position: relative;
}
第二步：利用伪元素，在a标签后面添加一条线段，并且利用定位固定在a标签文字下方。【预设】
a::after {
content: ‘’;
position: absolute;
background-color: red;
width: 100%;【设置宽度或者100%继承a标签设置的宽度】
height:1px;
bottom: 0;
left: 0;
}
第三步：当点击a标签，动态下划线出现，未点击的时候，没有动态下划线。
→动画效果；下划线的宽度由0→100%，因此修改上一段代码。【宽度改成0】，当a被hover的时候，宽度才100%
a::after {
content: ‘’;
position: absolute;
bottom: 0;
left: 0;
background-color: red;
width:0;【修改的属性】
height:1px;
transition: all 0.5s;【添加的动画效果】
}

a:hover::after{
width: 100%;
}