css text highlighting

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 :)

I can provide you the css hacks working only for firefox and safari

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

Reference:

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

Hope this help :)

The only method (that does not need extra markup) that i can think of would be to use a repeating background-image that has exactly the height of a line. This should work properly and fast if your line-height is constant. All other approaches are likely to be quite slow or bulky.

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.

Maybe this provides what you want

ul#container li.hilight {
    padding:3px 20px;
    background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
    line-height:30px;
    color:#fff;
}

and

<li class="hilight">
        This is how the text should look
    <br />
        but the HTML markup is messy
</li>