CSS format second line differently from first line

Question

Is there any way purely with CSS (or 'proper' markup) to style the 2nd line of a paragraph when the text wraps to a second line? A well placed <br /> would do it, but I don't believe that's good markup or SEO.

Specifically, say I have a paragraph that is 2 lines long. I would like the 2nd line to have a wider width than the first line. So the paragraph is a little "pyramid-like". But I don't want to use anything that's not a proper way to do this just for beauty's sake.

Example:

<p>I am a very long 
sentence where my second line is longer.</p>

Answer 1

You can use the :first-line pseudo-element:

See: http://jsfiddle.net/X33pY/ - resize the window to make a second line in the first paragraph.

p:first-line {
    color: red
}
p {
    color: blue
}

---

Just in case, this might be what you're after:

http://jsfiddle.net/qKRh8/

p {
    white-space: pre
}

Answer 2

You can use the :first-line pseudo-class to style the first line and, by implication, the second line will fall back to the default styling.

See:

http://www.w3.org/TR/CSS2/selector.html#pseudo-elements