CSS - using an image along with an accent line for a paragraph heading.

Question

A common, and good looking, typographical effect is a small image, maybe a stylized arrow, some text, and an accent line. Something like this:

-> Now this paragraph ---------------------------------

Where the "->" is some kind of small graphic, and the "-------" is an accent line, maybe colored.

I would like to do this in css, so in a content management system, the author would simply label the line "h3" and the style definition would add the graphic and the accent line.

I can put in the graphic, using CSS css that looks like this:

hd3 { background-image: url(/image/arrow_button.gif); background-position: left top; background-repeat: norepeat; padding-left: 55px; }

but I don't know how to add the following accent line. The accent line should start after the text and continue to the right margin of the page.

Answer 1

There are several ways to do this. The best solution may be to go

<h3><strong>Words</strong></h3>

with the CSS you have above plus

h3 strong { background-color:#ffffff; padding: 0 5px; } /*if white is the background color you want*/

and making the background image include your arrow and a continuing line, with the image being as wide as its container's max-width, if it has one.

By declaring a background color for an element within the h3, you give the illusion of the image stopping, and the line picking up in another image. Note that you'll have to do some figuring if the h3 can possibly wrap. You could get into a more complex solution for that.

Alternately you could just inline the image:

<h3>Words <img src=".." alt="" /></h3> 

Note that this means your presentation is more directly controlled by an HTML elemnt being present, which is sub-optimal in some ways, but sure is simple and is not a semantic nightmare, since it hides no content.