How to style half of my <hr>s differently from the other half?

Question

I'm trying to style half of an <hr> to be different from the other half, like this:

As you can see, the left half of the <hr> is red and a bit thicker than the thin, grey side on the right. Possible to accomplish this with CSS? Thanks!

Answer 1

For the <hr> line you can use the css :before pseudo-element to make the differently-colored area (please change colors and sizes to match your design):

hr {
    background-color: #555;
    border: none;
    display: block;
    height: 4px;
    overflow: visible;
    position: relative;
    width: 100%;
}

hr:before {
    background-color: #f90;
    content: '';
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    top: -2px;
    width: 20%;
    z-index: 1;
}

<hr>