为什么在伪元素之前无法获得100％的容器高度？

Question

我想了解为什么：before伪元素不占用父级高度的100％：

<div class="view-details"><a href="/retro-beauty-bar">VIEW DETAILS</a></div>

在这里，view-details（高度19px）具有一个before属性的border-left伪。但是before仅占用12px的高度。 我可以通过设置绝对位置来获得所需的高度，但是我认为这不是一个很好的解决方案，因为我需要使用margin。

.view-details:before {
    content: "";
    width: 1px;
    margin: 0 20px;
    border-left: solid 1px #cbcbcb;
}

.view-details {
    display: inline-block;
}

Answer 1

似乎可以正常工作，可能是您代码中的其他内容：

.view-details:before {
    content: "";
    width: 1px;
    margin: 0 20px;
    border-left: solid 1px #cbcbcb;
}

.view-details {
    display: inline-block;
    
    font-size:40pt;
}

<div class="view-details"><a href="/retro-beauty-bar">VIEW DETAILS</a></div>