文字后面加粗下划线

Question

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

我已经能够用嵌套的span 和彩色的border-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

另一种可能性：

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>

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

今天有人问我这种设计风格，所以我想看看 2020 年的选项。下面是使用这种技术的输出示例（见下面的 sn-p）：

该技术在嵌套跨度上使用背景渐变：

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 for details。

Answer 4

尝试使用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/

关键是改变每个跨度的背景大小。

Answer 5

你确实可以使用渐变，渐变可以通过内联元素内的几行进行动画处理。

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>

Answer 6

我们可以使用背景和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>