DekGenius.com
Previous Section  < Day Day Up >  Next Section

Recipe 1.17 Styling the First Line of a Paragraph with an Image

Problem

You want to stylize the first line of a paragraph and include an image; for example, see Figure 1-32.

Figure 1-32. The first line with a background image
figs/csscb_0132.gif


Solution

Use the background-image property within the :first-line pseudo-element:

p:first-line {
 font-size: 2em;
 background-image: url(background.gif);
}

Discussion

Through the :first-line selectors styles can only be applied to the first line of text of an element and not the width of the element itself.

In addition to the background-image property, the :first-line pseudo-element also supports the following properties allowing for greater design control:

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-shadow
line-height
clear

See Also

The CSS 2.1 specification for the :first-line pseudo-element at http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo.

    Previous Section  < Day Day Up >  Next Section