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

为什么在伪元素之前没有获得 100% 的容器高度？

Why before pseudo element doesn't get 100% container height?

html

css

pseudo-element