title: How to apply CSS to the first letter after :before content?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  p:before {  
      content:"Former - "; 
      color:red;
      font-family:"Tahoma" ,Times New Roman;
      font-size:70%;
  }
  
  p.normal:first-letter {
      font-size:40px;
      color:blue;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class="normal"&gt;First character of this paragraph will
    be normal and will have font size 40px;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here, the content in the <code>:before</code> pseudo-element is displaying in red, but I also want to style the character "F" of "<b>F</b>irst character of this paragraph" in blue. But instead, I see the "F" of "<b>F</b>ormer - " in blue.</p>
  
  <p>What I want is to apply both <code>:before</code> and first letter of <code>.normal</code> <em>after</em> the <code>:before</code> content to the same paragraph. Is this possible? If so, how?</p>