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,我更喜欢在大多数情况下使用下划线.

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些