在居中时仅为最后一行文字加下划线

Question

我想仅在某些文字的最后一行加下划线。当文本换行到更多行时，仍然只有最后一行必须加下划线。

我发现了Solutions。但是当文本居中时，这不起作用。因为当文本被包装时，该行一直延伸到最后一行的左侧。

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

有人有想法吗？

THX！

Answer 1

我猜这就是OP想要的：

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

我不喜欢这个解决方案，因为它需要复制内容，但也许有人有想法改进它......

JSFiddle

修改：添加结果的屏幕截图：

在Firefox 50.0中不起作用

Answer 2

我回答了类似的问题。
它不能用纯粹的CSS来完成。 我用javascript创建了小提琴 http://jsfiddle.net/VHdyf/89/

Javascript部分

(31, 586, 1383)

Answer 3

尝试以下CSS

div > p:last-child:after {
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 1px;
    border-bottom: 10px solid #000;
    content: ""
}

此处已更新JSfiddle