Question about syntax - using css inside jquery
I'm helping a friend build a Shopify site, so working with a CMS. They would like the names of the items to have one letter that has a custom look to match the way the wording is on the package of the products. Basically, the items all contain the abbreviation "No.", and they would like the O in that to be kind of superscripted and underlined.
In the product descriptions, this is no problem, using a <span style> to control the styling of the O exactly like I want it to be. The names of the items, being part of the database on the other hand, not so much.
So, I've been trying to use jQuery (something I'm not terribly familiar with) to accomplish this. What I've come up with so far is:
- var strNewString = $('body').html().replace(/\PAVANE NO./g,'PAVANE N<sup><u>O</u></sup>.');
- $('body').html(strNewString);
Which sort of accomplishes what I want, but the O ends up being too high with just <sup>ing it. I'd like to use css to have more control, but replacing the <sup><u> with a <span class="raised"> doesn't seem to work.
Do I need to write it out in another way to make it work?