【挑战】如何通过CSS实现多行文本两端对齐的下划线？-灵析社区
满脑子智慧溢出【挑战】如何通过CSS实现多行文本两端对齐的下划线。 要求： 1、文字行数是可变的。 2、下划线颜色和与文字的间距可调。 如图所示。 text-decoration border background-image都可以尝试。
应该是最帅的鹅一般来说就是借助 "background-image" 的渐变色来实现。比如说：
// stylus
div
line-height 25px
font-size 14px
text-indent @font-size * 2
background linear-gradient(white (@line-height - 1), black 0);
background-size 100% @line-height
然后使用 "background-size" 和 "background-repeat" 属性进行重复就好了。
"这里是在线Demo" (https://codepen.io/yogwang/pen/OJqXYOz)