如何在 CSS 中制作边框底部重叠文本？

问题描述

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

中“maygha”这个词的下划线一样

这就是我现在所拥有的：

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

<h1> hi there! <br> i'm <span> maygha!<span></h1>

解决方法

简单地，像这样使用::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;
}

<h1> hi there! <br> i'm <span> maygha!<span></h1>

,

我会将 inline-block 的 span 与使用 ems

相对于字体大小调整其高度结合起来

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

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

,

一种方法是通过 box-shadow，如以下代码段所示。缺点是您需要为阴影的颜色提供一个 alpha 分量。

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

}

<h1> hi there! <br> i'm <span> maygha!<span></h1>