Style certain characters with CSS

Hi I know you said in CSS but as everybody told you, you can't, this is a javascript solution, just my 2 cents.

best...

JSFiddle

css

span.highlight{
   background:#F60;
    padding:5px;
    display:inline-block;
    color:#FFF;
}

p{
   font-family:Verdana;   
}

html

<p>
    Let's go Zapata let's do it for the revolution, Zapatistas!!!   
</p>

javascript

jQuery.fn.highlight = function (str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z","highlight");

Result enter image description here


That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.

Tags:

Css