另一种可能：

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>
    <span>A</span><span>B</span><span>C</span>
</p>

今天有人问我关于这种设计风格的问题，所以我想我应该看看2020年的选项。下面是使用这种技术的输出示例（见下面的片段）：

该技术在嵌套范围上使用背景渐变：

body {
  min-height: 100%;
  background: black;
  padding: 20px;
  color: white;
  font-family: sans-serif;
  font-size: 2em;
}

h1 {
  font-size: 50px;
  font-weight: bold;
}

h1.gradient span {
  background: linear-gradient(0deg, rgba(255,0,255,0) 0%, rgba(255,0,255,0) 16%, rgba(255,0,255,1) 16%, rgba(255,0,255,1) 41%, rgba(255,0,255,0) 41%);
}

h1.padding span {
  padding: 0 0.5em 0 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<h1 class="gradient padding"><span>This text has an 'underline' behind the text. It can wrap and it can have padding.</span></h1>

这允许h1保持块级别，但将样式应用于它下面的行内元素，这允许样式应用于文本并在多行上换行。'underline'可以通过更改线性渐变停止来定位。
如果需要一些水平填充来使下划线从左侧或右侧的文本中突出更多，您也可以使用box-decoration-break的填充，这将使填充保持在每个换行上。box-decoration-break适用于所有现代浏览器，请参阅caniuse了解详细信息。

http://codepen.io/OxyDesign/pen/eHAac
With：在绝对位置之前
CSS

.underlined-text {
  font-size:100px;
}
.underlined {
  display: block;
  float:left;
  height:92px;
  position:relative;
}
.underlined:before {
  display: block;
  content:'';
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
  background:#f66;
  z-index:-1;
}
.underlined.first:before {
  height:15px;
}
.underlined.second:before {
  height:30px;
}
.underlined.third:before {
  height:45px;
}

尝试使用background-position：
HTML：

<p style='font-size:100px'><span class="a">A</span><span class="b">B</span><span class="c">C</span>

CSS：

p>span {
    background-image: url(http://i234.photobucket.com/albums/ee79/xxjetaimmexx/pink.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}
.a {
    background-size:100% 33%
}
.b {
    background-size:100% 50%
}
.c {
    background-size:100% 70%
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/355/
关键是改变每个跨度的背景大小。

我们可以使用背景和玩background-position-y

span {
  font: 36px sans-serif;
  /*                                         ↓ y position */
  background: linear-gradient(pink, pink) 0 90% / 100% 8px no-repeat;
  /*                                                    ↑ line height */
}

<span>Lorem ipsum</span>

通过使用变量更灵活的版本：

span {
  font: 36px sans-serif;
  background: linear-gradient(pink, pink) 0 var(--y-pos, 90%) / 100% var(--size, 8px) no-repeat;
}

<span>Lorem ipsum</span><br>
<span style="--y-pos: 70%;--size: 10px;">Lorem ipsum</span><br>
<span style="--y-pos: 50%;--size: 15px;">Lorem ipsum</span><br>
<span style="--y-pos: 100%;--size: 5px;">Lorem ipsum</span>

你确实可以使用渐变，渐变可以是动画的，可以通过内联元素中的几条线绘制。

p {
  font-size: 100px;
}

p span {
  background: linear-gradient(red, red)left bottom repeat-x;
  background-size: 35px 35px;
  transition:0.5s;
}

p span:nth-child(2) {
  background-size: 50px 50px;
}

p span:nth-child(3) {
  background-size: 65px 65px
}
p:hover span {
background-size: 0 0px;

<p><span>A</span><span>B</span><span>C</span></p>

<p><span>Aaa aaaaa aaaa aa aaaaaa aaaaaA</span><span>Bbbbb bbbb bbb  bb bbbbb bbb bbbb B</span><span>Cccccc cc ccc cccccccc cc ccccc  C</span></p>

还有一个窍门
调整行高和边框值。

span{
  font-family: "arial", san-serif;
  font-size:32px;
  
  display:inline-block;
  border-bottom: 12px solid #50D3CB;
  line-height: 0.2;
}

<span>text to be underlined</span>

我把它放在这里：

p {
  font-family: sans-serif;
  font-size: 48px;
  color: black;
  text-decoration-line: underline;
  text-decoration-thickness: 20px;
  text-underline-offset: -10px;
  text-decoration-color: red;
  text-decoration-skip-ink: none;
}

p span {
  text-decoration-line: underline;
  text-decoration-thickness: 30px;
  text-underline-offset: -20px;
  text-decoration-color: green;
}

<p>Lorem <span>ipsum</span> dolor sit amet,<br> consectetur <span>adipisicing</span> elit.<br> Quidem, repellendus.