Bold on span first letter not working - html

Question

Example here: http://jsfiddle.net/wsAK2/
Hello I have this html code:
<ul class="sidebar-nav">
<li class="sidebar-top"></li>
<li class="active">
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-home"></i>Dashboard<i class="fa fa-angle-down"></i>
<ul id="dashboard" class="collapse">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-signal"></i><span>Charts</span><i class="fa fa-angle-down"></i>
<ul id="charts" class="submenu collapse">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-users"></i><span>Users</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-calendar-o"></i><span>Calendar</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-gamepad"></i><span>Services</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-gears"></i><span>Options</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-envelope"></i><span>Email</span>
</div>
<div class="menu-arrow"></div>
</li>
</ul>
and the following css rule:
.sidebar-nav > li > div > a > span:first-letter {
font-weight:bold;
}
and here is the span element being inspected with chrome:
media="screen"
.sidebar-nav > li > div > a > span:first-letter {
font-weight: bold;
}
As you can see bold has no effect on it and I can't understand why ?
same happens in firefox too.

Answer 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; }

Answer 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;
}

Answer 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