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%;
}