Css Pseudo-class :first-letter

Question

Can it be used inside an a tag?

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

My name is <a class=x>Lionel</a>

I can't seem to make it work.

Answer 1

根据css2.1 :first-letter仅适用于块容器元素 。

Answer 2

Yes, that should work fine.

Can you provide a JSFiddle example of it not working?

It certainly should work -- See here for a test page which demonstrates it in action , and here for a browser compatibility chart (it says it should work in any browser).

[EDIT]

As @SilentGhost says, it only works for block level elements, which <p> is and <a> isn't.

You can make inline elements like <a> act as block elements by using the display:block; style. However this can mess up your page layout.

Fortunately, there is a half-way house option: display:inline-block; which should make your element get treated as a block element without disrupting your page layout. Try adding that to your stylesheet as follows:

a.x {
  display:block;
}

Your :first-letter style should now work.