title: Make first-letter of label uppercase
body: <p><strong>Edit:</strong></p>
  
  <p>It seems to be a futile attempt as there doesn't seem to be a way to make the first letter uppercase if there is a pseudo-element in the way, and unfortuntely the pseudo-element cannot be moved or removed as the below attempted answers would like it to be. In any case, thank you very much for all the help.</p>
  
  <hr>
  
  <p>I've attached a code example just to make things a bit easier.</p>
  
  <p>I'm wondering if I'm doing this correctly or if this is a futile attempt. Hope to god JavaScript is not needed for something as simple as this.</p>
  
  <p>Thank you very much on any insights!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label span:before {
    display: inline-block;
      content: " ";
    width: 10px; height: 10px;
      margin-right: 10px;
    border: 1px solid #333;
  }
  
  label {
    text-transform: lowercase;
  }
  
  label::first-letter {
    text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
    &lt;span&gt;
      TESTING
    &lt;/span&gt;
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>