如何使用 CSS 在文本后面创建粗下划线？

Barbara Streisand

发布： 2024-12-24 02:33:14

原创

410 人浏览过

How Can I Create a Thick Underline Behind Text Using CSS?

使用CSS在文本后面创建粗下划线

要使用span和CSS实现文本后面粗下划线的效果，有一个您可以使用的一些技巧：

选项 1：嵌套Spans

此方法涉及嵌套一系列 Span，每个 Span 的底部边框的大小和颜色都逐渐增加：

<p>

登录后复制

选项 2：盒状阴影

另一种选择是使用框阴影来创建underline:

p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}

登录后复制

<p>
  ABC

登录后复制

使用这些方法，您可以在文本后面创建粗下划线的错觉，位于基线之上或之下。

以上是如何使用 CSS 在文本后面创建粗下划线？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何使用 Flexbox 将元素底部对齐？下一篇：单独使用 CSS 可以禁用超链接吗？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章