Horizon(tal) line in the middle of nowhere


divider

Last week I was puzzling over how I could create a divider like the one pictured above without resorting to using an image. You can customise a hr tag to an extent using images, but any text I wanted to add would have to be part of the image. Perhaps I could do it in a similar fashion as how I do my headings on this site? But again, this would require using images.

Turns out theres an interesting way to do it in CSS.

First of all make sure that your html is set it in a fashion similar to this:

<div class="line"><span>or</span></div>

Then add the following css, altering where necessary.

div.line {
    position:relative;
    text-align:center;
    margin-top:0;
    text-transform:uppercase;
    font:bold 12px arial,sans-serif;
}

div.line:before {
    content:"";
    display:block;
    border-top:solid 1px black;
    width:100%;
    height:1px;
    position:absolute;
    top:50%;
    z-index:1;
}

div.line span {
    background:#fff;
    padding:0 10px;
    position:relative;
    z-index:5;
}

If you use spans elsewhere, it might be helpful to give that a class or an id as well, but since this is just an example I neglected to include that.

The original idea came from the AnimeLab app on iOS from which I’ve been taking some design inspiration - just personal preference, there are plenty of nicely designed apps out there you might like more. Check it out if you haven’t.

JSFiddle: [1]
Heading: [2] (I haven’t watched it)