为什么检测到 ::before 和 ::after 伪元素但未在 Chrome 中显示？

Question

我想设计一个 1px 线的水平分隔线。在该行的中间，有一个 svg。所以我为此使用 hr:before 和 hr:after ：

<hr class="linha" />

SCSS：

hr.linha {
    border: 0;
    border-top: 1px solid $primary;
    height: 0;
    margin: 4rem auto 4rem;
    text-align: center;
    width: 30%;

    &::before {
        content: "";
        background: white url("/img/logo-e.svg") no-repeat center;
        background-size: 20px 20px;
        margin: 0 auto;
        padding: 20px;
        position: relative;
        top: -15px;
        left: 0;
        right: 0;
    }

    &::after {
        content: " ";
        clear: both;
    }
}

Firefox 和 Safari 会按预期显示：一个水平的，中间有一个图像。 Chrome 只显示一条不间断的水平线。 ::before 伪元素存在，但屏幕上没有显示任何内容。

在 Chrome 的 Inspector 上，“computed styles”表明它正在计算图像并且图像可以看到，这意味着 url 路径是正确的。

我已经尝试过的：

• 使用 :before 或 ::before
• 仅使用 :before
• 使用内容：url("logo.svg") 代替背景：url("logo.svg")
• 使用内容：“一些文本”而不​​是背景：url(“logo.svg”)
• 应用 display: inline-block 或 display: block

为什么 Chrome 不显示 :before 伪元素？

Answer 1

如果使用相对位置，chrome会在之前使用自动宽度。如果使用绝对位置，则logo会正确显示。

hr.linha:before {
    position: absolute;
}