Horizontal rule line CSS (use a local SVG in a custom horizontal rule line)

Custom CSS & Theme Design
4

I seem to have gotten it to work.

But the svg doesn’t show up in color

image

body {
    --hr-line-offset: 25%; /* Sets the offset for the line to be drawn inside the <hr> */
    --hr-color: lightblue; /* Defines the color of the horizontal line */
    /* --hr-text-color: lightblue; */
    /* --hr-text-offset: 2ch; */
    --hr-thickness: 2px;
}

:root hr {
    --hr-line-color: var(--hr-color);
    display: grid;
    place-items: center;
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent,
        var(--hr-line-color) calc(50% - var(--hr-line-offset)),
        var(--hr-line-color) calc(50% + var(--hr-line-offset)),
        transparent
    );
}

:root hr::after {
    content: "";
    position: absolute;
    background-image: url("data:image/ ...");
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px; /* Adjust width as needed */
    height: 40px; /* Adjust height as needed */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%);
}