Underline only final line of text when centered

Question

I want to underline only the last line of some text. When the text wraps to more rows, still only the last line has to be underlined.

I found this Solutions. But that does not work when the text is centered. Because the line stretches all the way to the left on the last row when the text gets wrapped.

p{
  position: relative;
  display: inline
}
p:after {
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 1px;
  border-bottom: 10px solid #000;
  content: ""
}

<div style="text-align:center;">
  <p>Een lijn onder alleen de laatste regel, werkt ook op mobiel als de tekst over meerdere regels valt</p>
</div>

Jsfiddle

Anyone has an idea?

Thx!

Answer 1

I guess that's what OP wants:

.underlined {
  position: relative;
}

.text {
  display: inline-block;
  text-align: center;
}

.line {
  color: transparent;
  display: inline;
  position: relative;
  left: 50%;
}

.line:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 10px solid black;
  position: absolute;
  left: -50%;
  top: 0;
}

<p class="underlined">

  <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sed ratione voluptatum ducimus unde velit debitis asperiores expedita, a deleniti repellat quis officia. Voluptate, earum rerum itaque, iste eligendi velit!</span>

  <span class="line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sed ratione voluptatum ducimus unde velit debitis asperiores expedita, a deleniti repellat quis officia. Voluptate, earum rerum itaque, iste eligendi velit!</span>

</p>

I don't like this solution because it requires to duplicate the content, but maybe someone has an idea to improve it...

JSFiddle

---

Edit: Adding a screenshot of my result:

Is doesn't work in Firefox 50.0

Answer 2

I answered similar question.
It can't be done in pure css. I have created the fiddle using javascript.
http://jsfiddle.net/VHdyf/89/

Javascript part

var parentEl = document.getElementsByClassName('customBtn');

for(var i=0;i<parentEl.length;i++){
var currentEl = parentEl[i];
var button = currentEl.childNodes[1];
var words = button.innerText.split(/[\s]+/); // An array of allthe words split by spaces, since that's where text breaks by default. var
var lastLine = []; // Putall words that don't change the height here.
var currentHeight = currentEl.clientHeight; // The starting height.
while(1){
  lastLine.push(words.pop());
  button.innerText = words.join(' ');
  if (currentEl.clientHeight < currentHeight) {
    var span = document.createElement('span');
    span.classList=['underline'];
    span.innerText = ' '+lastLine.reverse().join(' ');
    button.appendChild(span);
    break;
  }
  currentHeight = parentEl[i].clientHeight;
  if(!words.length){
    break;
  }
}

}