html – 高级CSS挑战：仅使用CSS在最后一行文本下划线

我想强调多行文本的最后一行,或者至少创建它的暗示.仔细看下面的例子,因为我正在尝试做一些棘手的事情.

答：这就是我想要发生的事情(__标记文本应加下划线的位置)：

A line of text that is long enough so that it wraps
to another line.
________________

B.这是我不想要的：

A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________

C.或者这个：

A line of text that is long enough so that it wraps
to another line.
___________________________________________________

此效果适用于CMS,因此我不知道文本的确切长度.这意味着手动插入< span> s或< u>标签不是一个选项.我也不想用javascript.我很清楚我想要的效果不是默认行为,这需要一些棘手的CSS / HTML魔术.但我觉得这可能是可能的.如果您想不出办法,请不要费心提交答案.在你弄清楚如何去做之前,一切都是不可能的.

解决方法

这是@albert正在做的变化.它使用p：after {}技巧但具有不同的显示. < p>似乎必须是位置：相对;上班.

<style>
p{position:relative; display:inline}
p:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}
</style>
<p>first line of test text which is long enough to stretch onto a second line .</p>

http://jsfiddle.net/VHdyf/

关于这种方法的一个很酷的事情是它仍然使用border-bottom,我更喜欢在大多数情况下使用下划线.

原文地址：https://www.jb51.cc/html/231933.html