為什么在偽元素之前無法獲得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>