How to underline a dynamic paragraph of text to the end of the line?

Question

I have a dynamic paragraph (the text will be changed ongoing) that I want to underline, however I want the underlines to span to the right edge of the container element rather than stopping at the end of the text. If you use text-decoration: underline it will just underline the text that exists on each line rather than the whole line

I can obviously manually split the lines up and then use a border bottom to span the whole width however the text is variable and can be changed so each line can't be manually specified. Is there a way to dynamically underline each line to the end without splitting them up?

Thanks everyone!

Dave

Answer 1

Not really - if you want to underline the text and not the paragraph.
Because either you target a block element - in which case you can only underline the bottom, or you target an inline element - in which case it will not stretch to the border.

You could justify the text, but it would still not underline the last line to the right edge of the text.

The only hack-around would be to use a fixed line height, and use a repeating background with an "underline-image" in such a way that the text would seem underlined.
I strongly advise against this, as it most likely works differently in different browsers.

Answer 2

Try using <u>

<u><p>Some text</p></u>