title: :first-letter on li elements
body: <p>I'm trying to use a :first-letter pseudo element on a navigation menu.</p>
  
  <p>HTML such as:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;Navigation&lt;/li&gt;
          &lt;li&gt;Navigation&lt;/li&gt;
          &lt;li&gt;Navigation&lt;/li&gt;
          &lt;li&gt;Navigation&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And CSS like: </p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>nav li:first-letter {font-size: 150%;}
  </code></pre>
  
  <p>I've also tried</p>
  
  <pre class="lang-css prettyprint-override"><code>nav ul li:first-letter {font-size: 150%;}
  </code></pre>
  
  <p>to no help.</p>
  
  <p>I can see it working for the first element on the <code>&lt;ul&gt;</code> tag if I adjust it to this:</p>
  
  <pre class="lang-css prettyprint-override"><code>nav ul:first-letter {font-size: 150%;}
  </code></pre>
  
  <p>but still can't get exactly what I need; <code>&lt;li&gt;</code>'s inline whose first character is larger than the others.</p>