How can I create custom underline or highlight for text in html or css?

Question

I\'m trying to figure out how to create a custom background effect for text. In other words, how can I make something like this:

Answer 1

For these I usually use an SVG pixel (a 1x1 stretchable HTML-encoded SVG with a fill color) that we can manoeuvre anyway we want:

h1 {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='1' height='1' fill='red' /%3E%3C/svg%3E") no-repeat 100% 100%;
  background-size: 100% 50%;
}

My Text

This also allows for animations to be easily added. This only works on single-line items, however. You can change the color inside the svg fill property. If encoded it works on IE9+, so it's pretty compatible! Just remember that the hash sign in front of hex colors needs to be encoded as well - its %23 (personally I use sass to encode it for me).