文字背后的粗体下划线

Question

如何在使用跨度和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

附：前绝对位置

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/

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