哈喽,大家好啊,今天做一个li元素加上下划线效果,但是固定的很短的长度,如果使用border-bottom的话就会随着文字长度也变长,显然是不符合的
用border-bottom做成的情况:
然后我看csdn博客发现有灵感了
扒人家的代码
后自己实现就这样了,下方放相关效果和代码:
&:before {
content: '';
width: 40px;
height: 4px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: #1E2E80;
border-radius: 2px;
}