Looking to have a <hr> and <h3> together

Question

Like the example above. I've found some helpful script with the a small img which I do like however I don't know how to get the padding about the title so the line doesn't go straight through.

h3.line {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(../images/line.jpg);
    background-origin: padding-box;
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto auto;
    display: block;
    margin-bottom: 20px;
}

Which shows this.

Any suggestion or ideas?

Answer 1

You can have a 1px dot image which you can place as a background on the H3. Then have a span element in between which have a background on.

CSS:

h3 {
    background: url(images/dot.png) left center repeat-x;
    padding: 10px;
    text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }

HTML:

<h3><span>About</span></h3>

Answer 2

You can put a <span> for example in your <h3> and make it have the same background as your <h3> but without the line so the <span> effectively overlaps the <h3>.

You can say this to your span:

span {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

to make it center. You can add width and height to it too. line-height helps place your text to the middle vertically.

If you want to spare images than you can use text-decoration: line-through; to draw a line through your text.