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 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.