CSS styling a single character within a word

css, javascript, magento

Solution

I did it.

Please have a look at this Link

<div class="title">menu1</div>
<div class="title">bike4kids</div>
<div class="title">menu2</div>


var avno = $(".title:nth-child(2)").text();
var avn = avno.split('4');
var item = avn[0]+"<span style='color:red'>4</span>"+avn[1];
$(".title:nth-child(2)").html(item);

Problem

My client has asked for the letter 4 to appear in red, wherever it is used in his website navigation. For instance, where he has 'bikes4kids' as a menu item. Unfortunately, I am using a 'mega menu' style plugin for his Magento site that only allows for plain text menu items - I cannot use HTML code in the menu item title box, which takes away the chance of me using `<span>`. Is there a way of achieving this with JS? I assume not with CSS alone. EDIT: The mega menu I am working with can be seen here: http://www.magentech.com/extensions/commercial-extensions/item/246-sm-mega-menu-responsive-magento-module

Original source