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

Pour les <hr> vous pouvez utiliser la ligne css :before pour créer la zone de couleur différente (veuillez modifier les couleurs et les tailles pour qu'elles correspondent à votre conception) :

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>

Answer 2

Vous pouvez utiliser :before pseudo-élément pour la moitié de hr et utiliser 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>

Answer 3

Avec flex Je ferais très simple et utilisable box-shadow sur le pseudo pour rendre cette réponse différente des autres ;)

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>

Answer 4

Oui, le pseudo d'avant est génial. Mais voici une autre méthode que vous pouvez utiliser et que vous pouvez facilement mettre en œuvre en utilisant n'importe quelle grille css :

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

Answer 5

Vous pouvez le faire avec les sélecteurs :before / :after.

scss :

hr {
  overflow:initial;

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

Essayez de jouer avec ce violon que j'ai créé pour vous : https://jsfiddle.net/fwzs8uy0/

Personnellement, j'utiliserais div au lieu de HR.