el-tabs样式下划线比文字长

软软不吃肉

已于 2024-05-13 11:41:20 修改

阅读量79

点赞数 3

文章标签： vue.js css javascript

于 2024-05-06 15:53:56 首次发布

本文链接：https://blog.csdn.net/Giraffe0615/article/details/138497755

版权

效果图：

// 下划线长于文文字
    .el-tabs__item.is-active::after {
        content: ""; /* 必须，创建一个空的内容 */
        position: absolute; /* 让下划线相对于.tabs-item定位 */
        bottom: 0; /* 下划线位于元素底部 */
        left: 0; /* 从左侧开始 */
        width: 120%; /* 下划线宽度设为文字宽度的120%，可根据需要调整 */
        height: 2px; /* 下划线的高度 */
        background-color: currentColor; /* 使用当前文本颜色作为下划线颜色 */
    }