如何在 CSS 中使边框底部重叠文本？答案

【问题标题】：How to make border-bottom overlap text in CSS?如何在 CSS 中使边框底部重叠文本？
【发布时间】：2021-05-30 08:35:21
【问题描述】：

我试图在一个单词上加粗下划线并与上面的单词重叠，有点像负填充下划线。就像“maygha”这个词在this image中的下划线一样

这就是我现在拥有的：

span {
    border-bottom: 16px solid #a2c1f5;
}

&lt;h1&gt; hi there! &lt;br&gt; i'm &lt;span&gt; maygha!&lt;span&gt;&lt;/h1&gt;

【问题讨论】：

使用负数 margin-bottom 以便 span 的“hitbox”更高。现在你的border-bottom 可以触摸文本了。

标签： html css border padding underline

【解决方案1】：

简单地说，像这样使用 ::after

h1 {
  font-size: 2rem;
}

h1 span {
  display: inline-block;
  position: relative;
}

h1 span::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 0;
  height: .5rem;
  width: 100%;
  background: red;
  z-index: -1;
}

&lt;h1&gt; hi there! &lt;br&gt; i'm &lt;span&gt; maygha!&lt;span&gt;&lt;/h1&gt;

【讨论】：

谢谢！我怎样才能改变背景的位置（移动它更高/更低）？
你可以使用bottom、top和transforms ...现在，你可以看到我改变了bottom 20%

【解决方案2】：

一种方法是通过box-shadow，您可以在下面的 sn-p 中看到。缺点是你需要为阴影的颜色赋予一个 alpha 分量。

span {
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.5)

}

&lt;h1&gt; hi there! &lt;br&gt; i'm &lt;span&gt; maygha!&lt;span&gt;&lt;/h1&gt;

【讨论】：

【解决方案3】：

我会将span 的inline-block 与使用ems 调整其与字体大小相关的高度结合起来

span {
    border-bottom: 10px solid rgba(0, 0, 255, .5);
    display: inline-block;
    height: 0.7em;
}

<h1>
My <span>text</span>
</h1>

【讨论】：