如何实现文字下划线长度比文字实际长度长？

[lhw7791086]

如题，

#nav li a:hover{
            border-bottom: 5px solid rgb(255,255,255);
        }

实现鼠标移上去出现下划线，但是下划线长度等于文字长度，怎么实现下划线长度比文字长呢？就是说我想自己指定下划线长度，试了padding和margin只能调间距，下划线长度始终等于文字长度，请教怎么实现？PS:常规方法吧，用ul和li的，其他另类方法暂不考虑

[风中的少年]

在a中再包一层 <span> <a></a> </span> 这时候 a 设置margin 后，span 设置 下划线就会比a 长。

[天际的海浪]

对a元素设置了padding就可以啊

[fjfjfj]

a{padding-left:15px;padding-right:15px;}
a:hover{border-bottom: 15px solid #f66;}

[lhw7791086]

引用 1 楼 gy127132060 的回复:

a标签跟文字间加上div，，，然后在div上做padding。。。。不然干脆就用div的下边框做下划线。。。。

已解决，谢谢

[香蕉猪]

a标签跟文字间加上div，，，然后在div上做padding。。。。不然干脆就用div的下边框做下划线。。。。