How to apply CSS to the first letter after :before content?

Normally you would do this with the :first-letter pseudo-element, but seeing as you have :before content, which inserts text before the actual content of your paragraph, then rather than the first letter of the actual content, :first-letter would match the first letter of the :before content instead.

That means that instead of this:

<p class="normal">
  <p:before>Former - </p:before>
  <p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will
  be normal and will have font size 40px;
</p>

You actually get this:

<p class="normal">
  <p:before>
    <p.normal:first-letter>F</p.normal:first-letter>ormer - 
  </p:before>
  First character of this paragraph will
  be normal and will have font size 40px;
</p>

Due to how CSS generated content works, I don't think there's a solution in pure CSS to reach the first letter of the actual content once you have inserted content before it.

As an alternative, you could use a span in place of the :first-letter pseudo-element, to which you can then apply the blue color, but that means you have to insert extra elements:

  <p class="normal"><span>F</span>irst character of this paragraph will
  be normal and will have font size 40px;</p>

p.normal span {
    font-size:40px;
    color:blue;
}