title: why the first-letter doesn't work when I add the div::before?
body: <p>I want to change the color of the first letter &quot;E&quot; in &quot;Elzero&quot; without change the HTML script, but when I use <code>div::first-letter {color: #f44336}</code> the color don't changes unless I delete the :before pseudo element. Why?
  I tried to add !important : <code>div::first-letter {color: #f44336 !important;}</code> but it doesn't change.</p>
  <p>this is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div::first-letter {
    color: #f44336;
  }
  
  div {
    width: 600px;
    margin: 0 auto;
    background-color: #eee;
    text-align: center;
    padding: 0px;
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 7px;
    position: relative;
    border-right: 10px solid #673ab7;
    border-left: 10px solid #f44336;
  }
  
  div::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%);
  }
  
  div::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Hello&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to make like this design:
  <a href="https://i.stack.imgur.com/xYAHx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xYAHx.png" alt="expected result" /></a></p>