Subrayado grueso detrás del texto

¿Cómo reproducir este tipo de subrayado detrás del texto ABC utilizando spans y css?

imagen de línea subrayada gruesa

He podido subrayar debajo del texto con el span nested y el border-bottom coloreado, pero no puedo ubicarlo detrás de la imagen y por encima de la línea de base del texto.

 

ABC

Otra posibilidad:

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

ABC

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

Con: antes en posición absoluta.

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

Trate de usar background-position :

HTML:

 

ABC

CSS :

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

Demostración: http://jsfiddle.net/lotusgodkk/GCu2D/355/

La clave es alterar el tamaño de fondo de cada tramo.