CODEWITHSUNDEEP
csspseudo-element
user393219
user393219

Reputation:

: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.

Upvotes: 2

Views: 6054

Answers (3)

Christoph Martens
Christoph Martens

Reputation: 277

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.

Upvotes: 1

Guillaume Poussel
Guillaume Poussel

Reputation: 9822

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

Upvotes: 2

BoltClock
BoltClock

Reputation: 723638

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

Upvotes: 2

Related Questions