Thick underline behind text

Question

How to reproduce this sort of underline behind the text ABC using spans and css?

Answer 1

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.