Why are ::before and ::after pseudo-elements detected but not shown in Chrome?

I want to design a horizontal rule break that is a 1px line. In the middle of the line, there is an svg. So I'm using hr:before and hr:after for that:

<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 and Safari show it as expected: a horizontal like with an image in the middle. Chrome only shows an uninterrupted horizontal line. The ::before pseudo element is there, but nothing is visually printed on the screen.

On Chrome's Inspector, "computed styles" show that it's computing the image and the image can be seen, which means that the url path is correct.

What I have already tried:

Using :before or ::before
Using only :before
Using content: url("logo.svg") instead of background: url("logo.svg")
Using content: "some text" instead of background: url("logo.svg")
Applying display: inline-block or display: block

Why does Chrome not show the :before pseudo element?

Solution

if use position relative, chrome Taking auto width for before .if use position absolute, logo is displayed correctly.

hr.linha:before {
    position: absolute;
}