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>

Tags:

Html

Css

Recent Posts