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

前端之家收集整理的这篇文章主要介绍了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,我更喜欢在大多数情况下使用下划线.

猜你在找的HTML相关文章