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.


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.

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:

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




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


technique, but with distinct


. However, the


must be set to


for it to function properly.

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


This approach has a notable advantage of utilizing


instead of


, 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


. 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.



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