HR with two colors - html

Question

I'm trying to make an hr with two colors on it, one dark red on the bottom and one orange on the top. An image is attached that gives an example of what I'm trying for. Is there any way to do this using pure CSS?
EDIT: If not, is there a way to set an hr to be an image? Like a png? Something that will stretch for different sizes?

Answer 1

Use CSS with 2 borders like so:
hr {
border-top: 1px solid gray;
border-bottom: 1px solid white;
}
Example in JSFiddle.
And to mimic what you have in your picture with text floating on top of the HR, you can do something like this JSFiddle.

Answer 2

Another solution could be to just simply use a CSS gradient. Like so:
hr {
border: 0;
height: 1px;
background: #1e5799;
background: linear-gradient(to right, #1e5799 50%,#7db9e8 50%);
}

Answer 3

so if i understand correctly.. u want one hr..with lets say 1px height of blue and another 1px height of red sitting on top of each other..
u can do this with pure css, by using pseudo classes.
hr{
position:relative;
height:1px;
background-color:red;
}
hr:before {
position:absolute;
content : ' ';
left:0;
right:0;
height:1px;
top:-1px;
background-color:blue;
}

Answer 4

You don't need to use hr just a single element (Div) with Pseudo-elements like this:
:root {
background-color: red;
text-align: center
}
:root:hover {
background-color: orange;
}
div {
position: relative;
width: 40px;
display: inline-block;
font-style: italic
}
div:before, div:after{
content: '';
position: absolute;
width: 100px;
height: 1px;
background: black;
top: 50%;
border-radius: 4px;
box-shadow: 0 1px 1px white;
}
div:before{
left: -100px;
}
div:after{
right: -100px;
}
<div>or</div>