Question

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

thick underline behinde image

我已经能够使用嵌套的span和彩色border-bottom在下面下划线，但无法将隐藏在图像后面上面文本基线。

ABC

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

使用：在绝对位置之前

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

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

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

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

今天有人问我这种设计风格，所以我认为我会在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 for details。

文字背后的粗下划线

6 个答案: