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

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>

You can use :before pseudo-element for half of hr and use absolute position.

hr {
  position: relative;
  border: none;
  border-bottom: 1px solid #aaa;
  overflow: visible;
}
hr:before {
  position: absolute;
  left: 0;
  width: 50%;
  content: '';
  height: 3px;
  background: red;
  top: -1px;
}

<hr>

with flex i would do very simple and use box-shadow on the pseudo to make this answer different from others ;)

hr {display:flex;}
hr:before {
  content:'';
  width:50%;
  box-shadow:0 0 0 3px rgb(146, 24, 53);
}

body {background:#333;color:rgba(124,153,246)}
code{font-size:1.5em;color:gold}

<h1><code>FLEX</code> TEST ON <code>HR</code> PSEUDO</h1>
<hr>

Yea, the before pseudo is awesome. But here is another way you can use which you easily implement using any css grid:

CSS:

.red{
  border: 2px solid deeppink;
  position: relative;
  top: -1px;
}

HTML:

<div class="container">
  <hr class="red col-sm-6" /><hr class="col-sm-6" />
</div>

JsFiddle

You can do this with :before / :after selectors.

scss:

hr {
  overflow:initial;

  &:after {
    content:'';
    width:50%;
    height:3px;
    display:block;
    background:red;
    top:-2px;
    position:relative;
  }
}

Try playing with this fiddle I created for you: https://jsfiddle.net/fwzs8uy0/

Personally I'd use div instead of HR.

You can do it with two hr's:

hr {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  box-sizing: border-box;
}

hr:first-of-type {
  height: 5px;
  border: none;
  background: red;
}

<hr><hr>

Use linear gradient. This might help you.

hr {
border: 0; 
height: 1px;
background: linear-gradient(to right, red, yellow);
}