如何在不编辑行高的情况下实现此下划线或下边框效果？

Question

我想实现这个下划线，但不会弄乱线高。

如果我使用文字装饰：下划线;它太靠近文字了，没有视觉上的吸引力，而且如果我使用底部边框太远而且因为线条高度而在边缘上。

是否有其他HTML＆amp; CSS解决方案或解决方法，除了更改行高？

Answer 1

我有时会使用：after或：之前的伪元素。这样，我可以对它有多远而感到挑剔。

伪元素可以绝对定位以确保。

所以一般的例子：

.nav-bar-item:after {
    content: '';
    position: absolute;
    bottom: 8px;
    height: 4px;
    width: 100%;
    background-color: orange;
    display: none;
}
.nav-bar-item:hover:after {
    display: block;
}

Answer 2

如果您将主要元素（图像中的＆＃34;服务＆＃34;链接）设置为position: relative，则可以使用该项目的：before或：after伪元素，设置为{ {1}}以及上/左/右/下定位值。