4

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?

enter image description here

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?

2
  • you can use Pseudo elements and box-shadow added in my answer Nov 26, 2014 at 6:23
  • You shouldn't need to use pseudo elements.
    – Scott
    Oct 29, 2015 at 15:53

4 Answers 4

13

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.

5

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%);
}
1
  • 1
    i totally didn't know you could do gradients in backgrounds like that! upvote for you good sir.
    – nobody
    Nov 26, 2014 at 4:46
1

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>

0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.