CSS styling a single character within a word

Question

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

Answer 1

No, within “plain text menu items” (as described in the question) you cannot style one character differently from others (except in a few very special cases, which do not apply here: styling the first letter, and setting the font of some characters different from others). JavaScript won’t help, because you would still need to make the character an element, and anything containing an element is by definition not plain text.

So you need to consider other approaches, like menus with items that allow some markup.