html - 将 border-bottom 移到离文本更远的地方

Question

我正在尝试将边框底部向下移动，以便可以看到更多事件链接。

.navigation a.active-link {
    background-border: #red;
    border-style: solid;
    border-bottom: solid white;
    color: black;
    padding:10px;
}


#navigation {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  word-wrap: break-word;
  padding-top: 10px;
  margin-bottom: 15px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 26px;
}

问题是当我尝试增加 padding-bottom 时，它会堆叠我的文本，而我正试图避免这种情况。

https://jsfiddle.net/akn5r7y5/2/

Answer 1

您可以添加所需的 padding-bottom 并相应地设置 anchor 线高度，这样它们就不会堆叠

#navigation a {
    line-height:26px;
}

#navigation {
  padding-bottom:26px;
}

https://jsfiddle.net/akn5r7y5/3/