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 tri

Answer 1

Disclaimer: Chances are that this is not possible, but please consider this answer to be thinking out loud / suggestion of a place to start looking, than than working code.

Is there possibility of highlighting the lines of text (with a colour that matches the background colour) and then adjusting the line-height such that the background of the lower lines overlap the underline?

Pictures say a thousand words, so take a look at these:

Before:

After:

From these mock-ups you can see that there are a couple of caveats and do not match exactly what is being asked for, but perhaps this is a starting point..?

Answer 2

If this is the text "A line of text that is long enough so that it wraps to another line." and you want to underline "it wraps to another line." all you need is to use the selector.

For Html:

<div>
     A line of text that is long enough so that 
     <last>it wraps to another line.<last>
<div>

For CSS:

div last{
    text-decoration: underline;
}

Answer 3

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.

Answer 4

you can use css generated content to achieve the effect. i set up an example on jsfiddle, but essentially you add the border to p:after{}; in this example, the border stretches all the way across, which seems undesirable, however thats just because the parent container is vanilla for demos. i think it should be adaptable for your situation. here ya go: http://jsfiddle.net/jalbertbowdenii/bJ9D4/

Answer 5

According to this:

Selecting the last line of a <p> element

it won't be possible unless you use some JavaScript..

Answer 6

.title {
  width: 700px;
  overflow: hidden;
}

.title:after {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  height: 1px;
  box-shadow: -100vw 100vw 0 100vw;
}

<h1 class="title">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</h1>