文字后下划线

Question

如何使用span和css在文本ABC后面重现这种下划线？

我已经能够在带有嵌套和彩色的文本下方添加下划线，但无法在图像后面和文本基线上方添加下划线。spanborder-bottom

<p style='font-size:100px'><span style='border-bottom:30px red solid'><span>A</span></span><span style='border-bottom:60px red solid'><span>B</span></span><span style='border-bottom:90px red solid'><span>C</span></span>

Answer 1

今天有人问我关于这种设计风格的问题，所以我想我应该看看 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 保持块级，但将样式应用于其下方的内联元素，从而允许样式应用于文本并换行。可以通过更改线性渐变停止点来定位“下划线”。

如果需要一些水平填充来使下划线从左侧或右侧的文本中伸出更多，您还可以使用填充，box-decoration-break这将保持每个换行的填充。box-decoration-break适用于所有现代浏览器，请参阅caniuse 了解详细信息。

Answer 2

http://codepen.io/OxyDesign/pen/eHAac

:before 处于绝对位置

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;
}

Answer 3

Another possibility:

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

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

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

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

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