CODEWITHSUNDEEP
htmlcss
Irfan
Irfan

Reputation: 5062

making the first letter of each word color css

I've a logo text in anchor tag and the Text logo to have the first letter of ever word red.

<a href="http://frobbeintl.com" title="">FLETCHER ROBBE INTERNATIONAL LLP</a>

Like below image:

enter image description here

I've used span but it doesn't seem working in my scenario. Can some one point me to some CSS approach? Thanks

Upvotes: 2

Views: 7488

Answers (3)

jwahdatehagh
jwahdatehagh

Reputation: 115

You could change your code to the following:

<a href="http://frobbeintl.com" title=""><span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span></a>

Having that you can style the spans differently. From a markup standpoint that's fine because span has no meaning. Using this technique and ids/nth-child you can even go as far as styling every letter differently. As you see this gets ugly very quickly - so someone created a little jQuery plugin to do it for you: http://letteringjs.com/

Hope that helps.

Upvotes: 0

Francisco Presencia
Francisco Presencia

Reputation: 8841

Working JSFIDDLE

This is the best you can do for inline elements in pure HTML + CSS:

<a class = "name" href="http://frobbeintl.com" title="">
  <span>F</span>letcher
  <span>R</span>obbe
  <span>I</span>nternational
  <span>LLP</span<
</a>

CSS:

.name {
  text-transform: uppercase;
  }

.name span {
  color: red;
  }

You could use the ::first-letter selector, as in CSS-Tricks. <- only for block elements

Upvotes: 2

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Although you can use this property

a::first-letter {
   color: red;
}

But note this would be applied to the very first word in the Hyperlink, not in the word.

Here is a document for this http://css-tricks.com/almanac/selectors/f/first-letter/

Upvotes: 1

Related Questions