为什么在伪元素之前无法获得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>