How to reproduce this sort of underline behind the text ABC using spans and css?
Try using background-position:
HTML:
ABC
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%
}
Demo : http://jsfiddle.net/lotusgodkk/GCu2D/355/
Key is to alter the background-size of each span.