:first-letter on li elements

问题

I'm trying to use a :first-letter pseudo element on a navigation menu.

HTML such as:

<nav>
    <ul>
        <li>Navigation</li>
        <li>Navigation</li>
        <li>Navigation</li>
        <li>Navigation</li>
    </ul>
</nav>

And CSS like:

nav li:first-letter {font-size: 150%;}

I've also tried

nav ul li:first-letter {font-size: 150%;}

to no help.

I can see it working for the first element on the <ul> tag if I adjust it to this:

nav ul:first-letter {font-size: 150%;}

but still can't get exactly what I need; <li>'s inline whose first character is larger than the others.

回答1:

Because your li elements are all flowing inline (assuming you have a display: inline style that's not shown), the :first-letter pseudo-element will only pick up the very first letter out of that entire chunk of inline text. That is why ul:first-letter works, but li:first-letter does not.

Try making your list items inline blocks instead, so they continue to contain their text within their own boxes, while these boxes themselves flow inline. If necessary, zero out their margins and padding.

jsFiddle demo

回答2:

Your first CSS snippet works fine, look at this fiddle. You must have another css rule which override it.

回答3:

it seems as the created "Shadow" Markup from the Browser just inserts another element.

Something like:

<p><p:first-letter>H</p:first-letter>ello</p>

Did you try :first-letter selector with an inline-block and/or block element?

Try adding a display:block, that should work then.

来源：https://stackoverflow.com/questions/9553539/first-letter-on-li-elements

标签

css

pseudo-element