title: Changing the color of one character within a word without changing the kerning properties of the word?
body: <p>Suppose we have the following element:</p>
  
  <pre><code>&lt;div&gt;STACKOVERFLOW&lt;/div&gt;
  </code></pre>
  
  <p>And we want to make the <code>A</code> red, but without changing the kerning properties of the word.  In other words we want the word to display exactly the same way it did before.  There is a similar question here:</p>
  
  <p><a href="https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css">change-color-of-one-character-in-a-text-box-html-css</a></p>
  
  <p>However using a <code>span</code> element changes the kerning properties of the word (Adds more space in front of the <code>A</code>).</p>
  
  <p>Here's a screenshot from the jsfiddle in the <a href="https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css">referenced SO question</a></p>
  
  <p><a href="https://i.stack.imgur.com/EZzey.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZzey.png" alt="enter image description here"></a></p>
  
  <p>As you can see it looks like the <code>span</code> element adds a little more space.</p>
  
  <h2>Update</h2>
  
  <p>I'll add a screenshot along with some code to show what I mean.  If you look at the word <code>ICON</code> in the screen shot it is marked up like this (And the spans are causing additional space to be added):</p>
  
  <pre><code>    &lt;span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900"&gt;Ic&lt;/span&gt;
      &lt;span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900"&gt;o&lt;/span&gt;
      &lt;span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900"&gt;n&lt;/span&gt;
      &lt;span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100"&gt;Utility Tests&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ywBj1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ywBj1.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div { font-size: 3em; background: blue; display: inline-block; }
  span { color: red; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;STACKOVERFLOW&lt;/div&gt;
  &lt;div&gt;ST&lt;span&gt;A&lt;/span&gt;CKOVERFLOW&lt;/div&gt;
  &lt;img src="https://i.stack.imgur.com/EjnDF.png"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Per request in the comments color utilities come from <a href="https://superflycss.github.io/utilities-colors/target/test/html/" rel="nofollow noreferrer">SuperflyCSS Color Utilities</a></p>
  
  <p>The font utilities come from the <a href="https://superflycss.github.io/utilities-fonts/target/test/html/" rel="nofollow noreferrer">SuperflyCSS Font Utilities</a></p>
  
  <p>And the <code>u-text-uppercase</code> utility comes from The font utilities come from the <a href="https://github.com/superflycss/utilities-format" rel="nofollow noreferrer">SuperflyCSS Format Utilities</a></p>
  
  <h2>Another Update</h2>
  
  <p>Thanks you guys - The key - as mentioned in the accepted answer, is to keep the <code>&lt;span&gt;</code> elements on the same line.  When I do that is done this is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/VqSuT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VqSuT.png" alt="enter image description here"></a></p>