Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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.

like image 660
emersonthis Avatar asked Mar 02 '13 23:03

emersonthis


People also ask

How do you underline text only in CSS?

There is no CSS for applying an underline ( text-decoration: underline; ) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans.

How do you type the last line in CSS?

The text-align-last property in CSS is used to set the last line of the paragraph just before the line break. The line break may be due to the natural ending of a paragraph, or it may be due to the use of <br> tag.

Which CSS property will let you apply an underline to the text of an element?

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

How do you customize underline in CSS?

Steps: Create background image with linear-gradient() . Adjust its size with css background-size property. Place it at the bottom left position of the element with background-position css property.


1 Answers

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.

like image 59
emersonthis Avatar answered Oct 05 '22 11:10

emersonthis