Comment styliser la moitié de mes <hr>s différemment de l'autre moitié ?

Question

J'essaie de styliser la moitié d'un <hr> d'être différent de l'autre moitié, comme ceci :

Comme vous pouvez le constater, la moitié gauche de l'image de la <hr> est rouge et un peu plus épaisse que la partie grise et fine à droite. Est-il possible de réaliser cela avec CSS ? Merci de votre compréhension.

Answer 1

Vous pouvez le faire avec deux 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>

Answer 2

Utiliser un gradient linéaire. Cela peut vous aider.

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