So I'm building a mobile website using the WPtouch plugin for Wordpress.

I'm using an external CSS file to style certain elements of the site.

By default, the site displays the page title like this - "Home" "Shows" etc...

I would like to add something to CSS to make them display like this - "HOME //" "SHOWS //" etc.

I have used the following code in my CSS: {text-transform:uppercase;} {content: '//';}

However, this results in:


rather than


Any idea why it would push the // onto the next line?

The site is - (but it needs to be viewed on a touch screen phone)

Those items are probably contained within different "block" elements such as a div or p when the page is rendered. This will force a new line.
The page source will show you what is happenening.

So, after looking deeper at the code, the word "Home" is in a h2 tag, which is within a the div.

So how would I incorportate that into my CSS to place the // after the Home text? {text-transform:uppercase;} {content: '//';}