Member Avatar for hindu times

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)

  • 3 Contributors
  • 4 Replies
  • 136 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by santoodesigner
Member Avatar for JRM

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.

Member Avatar for hindu times

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: '//';}

Member Avatar for hindu times

Sorted it. Cheers!

Member Avatar for santoodesigner

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.