我只想在某些文本的最后一行下划线。当文本换行到更多行时，仍然只有最后一行需要加下划线。
我找到了这个解决方案 https://stackoverflow.com/questions/15180827/advanced-css-challenge-underline-only-the-final-line-of-text-with-css。但当文本居中时，这不起作用。因为当文本换行时，该线会一直延伸到最后一行的左侧。
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 http://jsfiddle.net/VHdyf/69/
有人有主意吗？
Thx!
我想这就是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 https://jsfiddle.net/jordinebot/shzn7xd4/
Edit:添加我的结果的屏幕截图：
在 Firefox 50.0 中不起作用
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
