Question

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.

Answer 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