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 :)
The best way I could se to do this in the end was to use the <span> tag. I hate doing this and try to avoid it when I can but it needed to be used in this case. See the updated JS fiddle in the question for how I did it.