这篇博客介绍了如何利用CSS样式实现文字下方的横线随着选中项的方向移动。通过设置`display: flex;`、`position: absolute;`等属性，结合伪元素`:before`和`:active`状态，实现了一个简单的导航条效果，当点击某个选项时，横线从当前选中项向左或向右平滑移动。
这是 参考别人的思路和想法https://blog.csdn.net/g229191727/article/details/80731527
下面是自己写的
.content-top {
display: flex;
border-bottom: 1rpx solid #f8f9fa;
padding-bottom: 20rpx;
}
.content-top-item {
flex: 1;
text-align: center;
font-size: 30rpx;
color: #1a2031;
position: relative;
}
.content-top-item.active {
color: #ff643a;
}
.content-top-item::before {
position: absolute;
content: ' ';
bottom: -20rpx;
width: 100%;
left: 100%;
text-align: left;
}
.content-top-item.active ~ .content-top-item::before {
left: -100%;
}
.content-top-item.active::before {
border-top: 1rpx solid #ff643a;
left: 0;
tr
最低0.47元/天 解锁文章
扫一扫
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
