html - CSS 不允许边框大小为 1，它在伪元素上强制渲染大小为 3

Question

我有一个带有 el 类的 p 元素，我用它来简单地显示一行文本。我还在该元素上使用了一个伪元素，我希望它的高度为 1 像素。因为我只想要一条可见的线，所以我为这个伪元素添加了 border-top: 1px 的样式规则，但它在 chrome 中呈现得很奇怪。它实际上似乎是 3 像素的高度，而开发工具实际上显示了 3 像素。然后，当我尝试在开发工具的计算部分中将高度更改为 1px 时，它会将值直接更改回 3px。这会是什么？我正在使用元标记设置设备宽度，可以确认我的 View 未缩放且为 100%

.el {
    position: relative;
    margin: 50px auto;
    font-size: 1.5em;
}
.el:before {
    content: " ";
    position: absolute;
    top: 50px;
    width: 100px;
    margin: 0 auto;
    height: 1px;
    border-top: 1px solid #000;
}

jsfiddle 正确显示边框... https://jsfiddle.net/2sa74g94/5/

编辑:经过一些试验，似乎是父元素 p 的字体大小导致伪元素以不同方式呈现。仅供引用，p 有一个从谷歌字体中提取的字体。

上下更改字体大小可使边框在 1 像素或子像素和 3 像素处正确且干净地呈现。

再次编辑:重新审视 jsfiddle。使用开发工具关注 p 元素，并使用 chrome 将字体大小从 1.5em 更改为 2.5em。您应该会看到边框大小发生变化。

Answer 1

您可以在 :before 元素上设置 background-color 而不是 border-top 来使其工作。伪元素的高度可以仅为 1px 和 width: 100px;。

    p {
    position: relative;
    margin: 50px auto;
    font-size: 1.5em;
}

p:before {
    content: "";
    position: absolute;
    top: 50px;
    width: 100px;
    margin: 0 auto;
    height: 1px;
    background-color: black; /*Removed border, added background-color */
}

<p>
this is some text
</p>