Amimeinsafe
New Member
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:\[code\].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; } \[/code\]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!