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:

.post.page-title-area {text-transform:uppercase;}

.post.page-title-area:after {content: '//';}

However, this results in:

HOME
//

rather than

HOME //

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


The site is - www.rjt-online.com (but it needs to be viewed on a touch screen phone)

Recommended Answers

All 4 Replies

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 post.page-title-area div.

So how would I incorportate that into my CSS to place the // after the Home text?

.post.page-title-area {text-transform:uppercase;}

.post.page-title-area:after {content: '//';}

Sorted it. Cheers!

nice to see people sharing their ideas

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.