Change formatting of a specific character using css or jquery

Question

I sometimes create quick and dirty html menus or other types of lists using the | to separate elements, i.e.:

Home | change | etc...

I like to make pipes bold and colored, and wonder if there is a quick way to select a specific character in CSS styles. (or maybe JS / jquery)

I know that I can do this with the spans around the pipe, but I thought that it could be elegant to be able to choose this particular character.

Answer 1

You can pass a callback function to the .html() method to wrap these characters in spaces for you:

 $('p.menu').html(function(i,el) { return el.replace(/\|/g, '<span class="sp">|</span>'); });​ 

http://jsfiddle.net/mblase75/ymE6y/