Style Half <hr> Unlike the other half

Question

As the name implies, I'm trying to create a half <hr> to be different from the other half, for example:

As you can see, the left half of the <hr> red and slightly thicker than the thin, gray side on the right. Can this be done with CSS? Thanks!

Answer 1

For the <hr> you can use the css :before pseudo-element to make different colors (please change the colors and sizes to suit 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> 

Answer 2

You can use the :before pseudo-element for half hr and use the 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

with flex I would do it very simply and use box-shadow on pseudo so that this answer is 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> 

Answer 4

Yes, the previous pseudo version. But here you can use another way that 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

Answer 5

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

SCS:

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

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

Personally, I use div instead of HR.

Answer 6

You can do this with two hr :

 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 7

Use a linear gradient. It can help you.

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