asked on

css psuedo similar to :first-letter to change size of first word

On a site I'm building using wordpress as the CMS, the site title has two words (Wingham Motel).
I want the word "Wingham" to appear on top of the word "Motel" which is easy enough to do, I just limit the width of the DIV and specify line height to suit.
What I'd like to do though, is make the top word (which has more letters) shrink to be the same width of the bottom word.
Easy enough to do if one was in a span, but, the words are pulled in from the wordpress database <?php bloginfo('name'); ?>.
I was hoping there was something like the :first-letter pseudonym to achieve this...

Any suggestions?

Kyle Hamilton

You would have to use javascript for this.

Are you using jquery on your site? what is the markup of the phrase?

something like this?
<h2 class='title'>Wingham Motel</h2>

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Reece

ASKER

Perfect! because I've only got two words, and it will be two lines, I just used :first-line

.site-name {
      display:block;
      max-width:200px;
      line-height:36px;
      font-size:48px;
      padding:60px 0 0 15px;
      margin:0px 0px 10px 0;
      font-family:"Arial Black", Gadget, sans-serif;
      text-transform:uppercase;
}

.site-name:first-line {
      font-size:33px;
}

I'm going to keep note of your link Gary in case I need it for other sites.
Cheers all