链接中的高度属性：悬停

Question

我有一些链接。 over在链接和伪元素中有转换。

我将伪元素的高度设置为3px，但它与另一个元素的不同。

在此图像中，活动链接正常，伪高度为3px。

注意栏的高度，不一样。

代码越少：

.item-link {
    position: relative;
    font-size: 16px;
    transition: padding-left 0.3s ease-out;

    &:before {
        content: '';
        display: block;
        position: absolute;
        background-color: red;
        top: 6px;
        width: 0px;
        height: 3px;
        transition: width 0.3s ease-in-out;
    }
}

.item-link:hover {
    padding-left: 16px;
    color: @red;

    &:before {
        width: 8px;
    }
}

如何解决具有相同类和相同悬停操作的链接之间的像素差异？