如何实现文字下划线长度比文字实际长度长?_html/css_WEB-ITnose
程序员文章站
2024-01-22 11:41:34
...
如题,
实现鼠标移上去出现下划线,但是下划线长度等于文字长度,怎么实现下划线长度比文字长呢?就是说我想自己指定下划线长度,试了padding和margin只能调间距,下划线长度始终等于文字长度,请教怎么实现?PS:常规方法吧,用ul和li的,其他另类方法暂不考虑
已解决,谢谢
#nav li a:hover{ border-bottom: 5px solid rgb(255,255,255); }
实现鼠标移上去出现下划线,但是下划线长度等于文字长度,怎么实现下划线长度比文字长呢?就是说我想自己指定下划线长度,试了padding和margin只能调间距,下划线长度始终等于文字长度,请教怎么实现?PS:常规方法吧,用ul和li的,其他另类方法暂不考虑
回复讨论(解决方案)
a标签跟文字间加上div,,,然后在div上做padding。。。。不然干脆就用div的下边框做下划线。。。。
在a中再包一层
这时候 a 设置margin 后,span 设置 下划线就会比a 长。
对a元素设置了padding就可以啊
a{padding-left:15px;padding-right:15px;}a:hover{border-bottom: 15px solid #f66;}
a标签跟文字间加上div,,,然后在div上做padding。。。。不然干脆就用div的下边框做下划线。。。。
已解决,谢谢