I'm trying to achieve an underline on some wrapped text that fits to the width of the bottom row of text whilst only appearing underneath that bottom line. Figure 1 illustrates the desired effect
Figure 1
Using this HTML:
<h2><span class="inline-block">optatur, volendit inum simolor</span></h2>
and setting the span to display:inline; I can get the underline to fit perfectly with the width of the text but it underlines all of the text.
Or, setting the span to display:inline-block; I can get the underline to only appear under the bottom line but it then fills the whole width of the parent.
See this JSfiddle for the above examples: http://jsfiddle.net/PWDV7/1/
Is there any way to achieve the result of figure 1?