<li>边框不包括其中的所有项目

Question

我制作了导航标签，当标签处于有效状态时，或者当前＆＃34;我希望边框显示在该标签的底部，但边框仅包含图标而不包含文字......

我的HTML

<li class="current"><a href="#tab-3"><img src="assets/related.svg" 
height="20px" width="20px">Related</a></li>

我的CSS

.tabs-menu li.current {
         position: relative;
         font-weight: bold;
         border-bottom: 3px solid red;
    }

这就是我得到的

这是一个小提琴 https://jsfiddle.net/qxL6w0yf/

我需要它看起来像这样

注意：在小提琴中，标签因某些原因不起作用，但我认为这是不相关的。感谢。

Answer 1

您需要做的就是在最后添加a。否则，它会忽略嵌套的a标记。

.tabs-menu li.current a {

当我将其添加到您的代码示例中时，这会生成您正在寻找的结果。

Answer 2

您将ul和li的高度限制为30px，将其删除。

改变如：

.tabs-menu li {
    height: 30px;<---------------------Remove Or 50px
    //More codes......
}

.tabs-menu {
      height: 30px;<---------------------Remove Or 50px
      //More codes......
}

Fiddle