Been a while since I had a CSS related problem but here I am. to cut a long story short I want to highlight text with a gradient background which I have managed to achieve using the `<span>` tag and setting a background image onto it. The problem is it startes to get a bit trippy and breaks when the text goes on to a new line.

I have managed to fix it but the HTML is horrible and I don't like compromising HTML code for style purposes as a rule.

The best way to describe this is just to show you.

<http://jsfiddle.net/sambeckhamdesign/2HSqh/11/>

The top `<li>` is the good HTML with the broken style and the botom `<li>` is how it's supposed to look but with awful HTML markup.

Any solutions obviously appreciated. Don't mind using Javascript or jQuery but I'd rarther do it in CSS if I could.

Ta pets :)