Custom <hr> with image/character in the center

Question

I'd like to recreate this horizontal rule:

I have the double lines, but I'm not sure how to go about getting some kind of a character or image in the center. I'm thinking I might be able to use :before and :after, but I don't know how to utilize them in this case. For the sake of answering the question, let's just try and get the center character to be a character. I'll figure out the image/icon later.

Ideas? Here's my code for the lines:

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #444;
    border-bottom:1px solid #444;
    margin:25px 0px;
}

Answer 1

Here's a screenshot of what I was able to produce. See it in action at jsfiddle.net.

And here is the CSS:

body {
  background: #454545;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
  margin: 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr:after {
  content: "§"; /* section sign */
  color: #999;
  display: inline; /* for vertical centering and background knockout */
  background-color: #454545; /* same as background color */
  padding: 0 0.5em; /* size of background color knockout */
}

/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr:after {
  content: "";
}

The section sign

To add the section sign, you can use generated content with either :before or :after. The remaining tricky parts are horizontal centering, vertical centering, and knocking out the borders.

Horizontal centering

Horizontal centering is as simple as adding text-align: center to the hr and making sure the generated content is display: inline.

Vertical centering

Vertical centering requires a little knowledge of inline rendering. The vertical space consumed by a line of text is determined by line-height. Even if the line-height is much smaller than the size of the rendered character, the character is still displayed full size, but the space it takes up is dictated by the line-height. Using line-height: 1px achieves the vertical centering.

Knocking out the borders

Finally, the only way I know of to knock out the borders behind the section sign is to cover them up with another color. In this case, we use the same background color as is on the rest of the document so it seems to blend in. Set an appropriate background-color and then use left and right padding to control how much space is to either side of the section sign.

1px gap between the borders

You'll also notice that I'm setting box-sizing: content-box. This is to ensure that the gap between the borders is 1px. (An alternative but equivalent set up would be box-sizing: border-box; height: 3px;.)

Opera rendering bug

@cimmanon pointed out some Opera rendering bugs, so I decided to degrade gracefully and not show the section sign. I think showing just the lines still looks very tidy and professional. If you really want to get this working in Opera, you could use different markup like <div class="hr"></div> (and of course update the CSS to match).

Answer 2

Here is what I believe to be the most responsive, lightweight and modern version for when the symbol isn't a font.

Snippet

hr.hr--logo {
  border-top: solid #000 1px;
  margin: 50px 0;
}
hr.hr--logo:after {
  content: url( 'logogram.svg' );
  /* Controls the position of the logo */
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  /* Controls the whitespace around the symbol */
  padding: 20px;
  background: #fff;
}

<hr class="hr--logo">