Html CSS不允许边框大小为1，它'；s在伪元素上强制渲染大小为3的对象

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

JSFIDLE正确显示边框

编辑：经过一些实验后，似乎是父元素p的字体大小导致伪元素呈现不同。仅供参考，p有一个从谷歌字体中提取的字体

上下更改字体大小可使边框在1px或子像素化和3px时正确渲染和清洁

---

再次编辑：重新审视JSFIDLE。使用dev工具关注p元素，使用chrome将字体大小从1.5em更改为2.5em。您应该可以看到边框大小的变化。

您可以在

:before

元素上设置

背景色，而不是
边框顶部
，以使其正常工作。伪元素的高度可以为1px，宽度为100px


p{
位置：相对位置；
保证金：50px自动；
字号：1.5em；
}
p:以前{
内容：“；
位置：绝对位置；
顶部：50px；
宽度：100px；
保证金：0自动；
高度：1px；
背景色：黑色；/*删除边框，添加背景色*/
}

这是一些文本
你是说边界显示3像素？我刚刚检查了小提琴，它显示了1px。@ibu当与transform:translateY组合使用时，我将它缩小到了字体大小。。请参阅上面的更多信息为什么要在
内容中添加空格：“
让内容的值仅包含
”
，而
“
之间不包含任何内容（双引号）。我希望我能说这是有效的。但事实上它没有！非常奇怪，因为我确信它会修复它。经过一些实验后，它实际上是父元素的字体大小。我会将此新信息添加到帖子中。然后我想这是因为
内容中的空间：；
。很高兴你找到了答案。