Bold On Span First Letter Not Working

Example here: http://jsfiddle.net/wsAK2/ Hello I have this html code:

Solution 1:

The problem is, that the :first-letter doesn't work on inline-element(such as span e.g), but on block/inline-block elements (e.g. p, table caption, table cell, etc).

Therefore it's better to apply :first-letter to a p instead of a span.

 p:first-letter {font-weight: bold;}

If you really need that :first-letter selector on the span, you can still add display:block to the span

 .sidebar-nav > li > div > a > span { display: inline-block; }

Solution 2:

:first-letter does not appply to inline elements.

.sidebar-nav > li > div > a > span {
    display: inline-block;
}

.sidebar-nav > li > div > a > span:first-letter {
    font-weight:bold;
}

Solution 3:

Per MDN:

A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

An easy way to fix this is to change your span displays to inline-block:

span {
    display:inline-block
}

jsFiddle example