Question

I am looking or a way to include two images left and right to a title span. The problem I am facing is, that this title will in some cases be stretched across two lines, however not always. I do not want to include two extra elements before/after or after the title but am instead looking for a way to achieve what I am trying without adding new elements to the code. I was therefreo hoping to use :before and :after. This is what I came up with:

.block-title:before { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 -36px; background:url(../images/sidebar_ornament_l.png) no-repeat 0 0; }
.block-title:after { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 9px; background:url(../images/sidebar_ornament_r.png) no-repeat 0 0; } 

While this will work great, if the title is only one line, titles that will take up two lines, will not behave the way, I would want them to, but instead will look like this:

I have tried everything I could think of, to make the :before and :after pseudoelements behave as I want them to, changing position and display, chaing the actual text span position, etc but just couldn’t achieve what I want to.

Since I want the two images to align next to the actual text span, a single background image won’t work. The spacing between the text and the image would be too big in some cases, which will look odd. Is there a way to make this work, so I will end up with something like this for two line titles:

Thank you!

Answer 1

Well, this is a general concept, i need your full code to provide a specific answer.

Anyway, check this demo

HTML:

<span class="block-title">Some text is here</span>
<hr>
<span class="block-title">Some more text<br>is here</span>
<hr>
<span class="block-title">Even<br>more text<br>is here</span>

CSS:

.block-title {
    position:relative;
    display:inline-block;
    text-align:center;
    padding:0 34px; /* width of your ornament + 6px per each side,
                        adjust to your actual layout */
}
.block-title:before, .block-title:after {
    content:" ";
    width:28px;
    height:14px;
    position:absolute;
    top:50%;
    margin-top:-7px; /* half of ornament's height */
}
.block-title:before {
    background:url(../images/sidebar_ornament_l.png) no-repeat 0 0;
    left:0;
}
.block-title:after {
    background:url(../images/sidebar_ornament_r.png) no-repeat 0 0;
    right:0;
}