Create Divider With Text In The Middle Using <hr> Tag And CSS
June 19, 2023 by Andreas Wik
With a <hr> (horizontal rule) tag and some CSS we can easily create a divider with text in the middle of it. In our case we will also use a gradient to to have the line fade out to the right and left.
This is what we will end up with:
See the Pen Untitled by Andreas Wik (@andreaswik) on CodePen.
HTML
First, we set up a <hr> element with data-content holding our text, in this case “OR”.
<hr class="hr-text gradient" data-content="OR">
CSS
We will write our CSS in three steps. First, let’s select our hr element with the .hr-text class and add a few basic rules, most importantly the position and text-align properties.
.hr-text {
border: 0;
font-size: 14px;
height: 1.5em;
line-height: 1em;
position: relative;
text-align: center;
}
Second, we use .hr-text::before to create a before pseudo element with some styles. This is the visible line we want to achieve, so we’ll definitely want to set its width and height. Let’s also add a background gradient and have it going from left to right, from transparent, to white (or whatever color you choose), and back to transparent. We also need to set content to an empty string. In order have it appear in the center vertically we will set its position to absolute and top to 50%.
.hr-text::before {
content: "";
background: linear-gradient(to right, transparent, white, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
Finally, we also crate an after pseudo element. This will be our text, and so we add a background color to it, a text color, we set content to the data-content value we set in the HTML above (in this example we have set it to “OR”). As for the padding, you can play around with the values to increase or decrease the space around the text.
.hr-text::after {
background-color: #1a1a1a;
color: white;
content: attr(data-content);
line-height: 1.5em;
padding: 0 7px;
position: relative;
}
That is it. Hope you find it useful!
Again, here is the CodePen:
See the Pen Untitled by Andreas Wik (@andreaswik) on CodePen.
Share this article
