Recipe 2.21. 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 2-36.

Figure 2-36. The first line with a background image

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 pseudo-elements, 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.