如何为多行文本添加可调整距离的下划线?

如何为多行文本添加可调整距离的下划线?

实现距离可调的多行文本下划线

如何为多行文本添加可调整距离的下划线?我们希望实现类似于图中蓝色的效果,而不是默认的黑色下划线(由 text-decoration: underline; 产生)。同时,我们希望能够调整下划线颜色和它与文本之间的距离。

答案:

text-decoration: underline;
text-underline-offset: 5px; /* 调整距离 */
text-decoration-color: blue; /* 调整颜色 */

这种方法使用了两个 CSS 属性:

  • text-decoration: 将文本装饰为下划线。
  • text-underline-offset: 调整下划线与文本之间的垂直距离。
  • text-decoration-color: 调整下划线的颜色。

如需查看实际效果,请访问以下链接:

www.example.com/demo.html

以上就是如何为多行文本添加可调整距离的下划线?的详细内容,更多请关注其它相关文章!