CSS Challenge: Applying Underline to Only the Last Line of Text

I desire the title links to be underlined when hovered over, while the non-link titles should not be underlined. To clarify, the linked titles should have underlined text upon hover, as demonstrated by “B.” Conversely, I do not want the non-linked titles, such as “C.”, to be underlined when hovered over. This effect is meant for a CMS, so the length of the text is uncertain.


Question:

I aim to emphasize the concluding sentence of text spanning several lines, or at the very least, give the impression of doing so. Observe the ensuing instances carefully, as I am attempting a cunning maneuver.

The desired outcome is outlined below, with

__

indicating where the text should be emphasized.

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

B.
The following are the things I do not desire:

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

Reword the following phrase to avoid duplication while retaining its intended meaning:
C.
Alternatively:

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

As the length of text is uncertain for a CMS, it is not feasible to insert

<span>

or

<u>

tags manually. Additionally, the use of javascript is not preferred. Although the desired effect is not the default behavior, it might be achievable through CSS/HTML techniques. If you are unable to come up with a solution, kindly refrain from submitting an answer. Remember, everything seems impossible until it is figured out.


Solution 1:

This is a modified version of @albert’s approach. It employs the

p:after{}

technique, but with distinct

display

. However, the

<p>

must be set to

position:relative;

for it to function properly.


first line of test text which is long enough to stretch onto a second line .

http://jsfiddle.net/VHdyf/

This approach has a notable advantage of utilizing

border-bottom

instead of

underline

, which is my preferred choice in the majority of situations.


Solution 2:


To achieve a particular effect, you may utilize the
CSS Generated Content
code. An example has been set up on jsfiddle where the border is added to

p:after{}

. Although the border appears stretched in the demo due to the vanilla parent container, it should be adaptable to fit your requirements. Here’s the link to the example: http://jsfiddle.net/jalbertbowdenii/bJ9D4/.


Solution 3:

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Solution 4:

Please note that while this answer may not be feasible, it is intended as a brainstorming session or a starting point for further exploration rather than a functional code.

Can the lines of text be highlighted with a background color and then have their line-height adjusted so that the underline is overlapped by the background of the lines below?

These visuals are worth a thousand words, therefore, have a glance at them.

Before:

After:

These mock-ups have a few limitations and do not precisely align with the requirements, but they could serve as a foundation.

Frequently Asked Questions

Posted in Css