html - Advanced CSS challenge: underline only the final line of text with CSS

Question

I want to underline the final line of multi-line text, or at least create the allusion of it. Look closely at the following examples, because I'm trying to do something tricky.

A. Here's what I want to happen (the __ marks the where the text should be underlined):

A line of text that is long enough so that it wraps
to another line.
________________

B. Here's what I DON'T want:

A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________

C. Or this:

A line of text that is long enough so that it wraps
to another line.
___________________________________________________

This effect is for a CMS so I won't know the precise length of text. This means that manually inserting <span>s or <u> tags are not an option. I also don't want to user javascript. I'm well aware that the effect I want is not the default behavior and that this will require some tricky CSS/HTML magic. But I feel like it might be possible. If you can't think of a way to do it, please don't bother to submitting an answer. Everything is impossible until you figure out how to do it.

Answer 1

Here's a variation on what @albert was doing. It uses the p:after{} trick but with different display. The <p> seems to have to be position:relative; to work.

<style>
p{position:relative; display:inline}
p:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}
</style>
<p>first line of test text which is long enough to stretch onto a second line .</p>

http://jsfiddle.net/VHdyf/

One cool thing about this approach is that it still uses border-bottom, which I prefer to using underline in most cases.