CSS：首字母编码不起作用

Question

I'm new to HTML and CSS. I'm having problems getting my pseudo elements to work in paragraphs. The CSS I'm writing is

a:first-letter  { 
  font-size:3em;
}

The HTML code is

<p>Lorem ipsum, etc to end of paragraph</p>

The same thing happens with the before/after pseudo elements as we'll. the browser I'm using is Safari. I'm sure I've typed it out correctly but it just doesn't work. Any suggestions gratefully received.

Thanks,
Ingrid

Answer 1

Well you did said paragraphs but your CSS rule is applied to an anchor (link) instead of a paragraph.

So you might want to do something like:

p:first-letter { font-size:3em; }

After I checked, the :first-letter pseudo element indeed doesn't work for inline elements and if you wan't to use it on an <a> you have to define your element as an inline-block or block element:

a { 
    display: inline-block;
    /* Since inline-block doesn't work on IE 7 and below you will need the following hack */
    *display: inline;
    zoom: 1;
}

Here is a jsFiddle example.