如何从侧面减少线的长度？

Question

我设法突出显示带有红色底部边框的活动菜单项。但我想从侧面剪短。这是我现有的代码。

.nav-regular .nav-item.level0:hover > a
 {
 background-color: ;
 border-bottom: 3px solid #f00;
 }

see screenshot

Answer 1

为此

左右边框

border-left: 1px solid;

但是边框需要空间使用它可能会影响间距我的建议是将它用于所有菜单并且当活动时改变底部的颜色

Answer 2

如果您尝试缩短底部边框长度，请使用此选项：

border-bottom-width: given length;

希望这有帮助。

Answer 3

您可以从链接中删除填充，而是在父标记中添加填充。

在：

<ul><li><a href="#" style="padding:0 10px">test</a></li></ul>

更改为：

<ul><li style="padding:0 10px"><a href="#">test</a></li></ul>

Answer 4

删除标记的填充，并在链接

之间为空格提供边距li

.nav-regular .nav-item li{
         margin: 0 10px;
        }
        .nav-regular .nav-item.level0 > a
         {

        paddin-left: 0;
        padding-right: 0;
         }