Changing the color of one character in a word without changing the kerning properties of the word?

Question

Suppose we have the following element:

<div>STACKOVERFLOW</div>

And we want to make Ared, but without changing the kerning properties of the word. In other words, we want the word to display exactly the same as before. There is a similar question here:

change-color-of-one-character-in-a-text-box-html-css

However, using an element spanchanges the kerning properties of the word (adds more space before A).

Here is a screenshot from jsfiddle in the SO link question

As you can see, the item spanadds a bit more space.

Update

, , . ICON , ( ):

    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
    <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
    <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span></h1>

div { font-size: 3em; background: blue; display: inline-block; }
span { color: red; }

<div>STACKOVERFLOW</div>
<div>ST<span>A</span>CKOVERFLOW</div>
<img src="https://i.stack.imgur.com/EjnDF.png">

SuperflyCSS Color Utilities

SuperflyCSS

u-text-uppercase SuperflyCSS

, . - , , <span> . , :

Answer 1

!

:

<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span><span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span><span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span><span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>

<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic<span class="u-text-color-md-pink-a200">o</span>n</span>

font-size: 0 reset float: left  

.third {  font-size: 0;  }

.third span {  font-size: 16px;  }

.fourth span {
  float: left;
}

<strong>First:</strong><br>
<span class="first">Ic<span>o</span>n</span> <span>Utility Tests</span>

<br><br>
<strong>Second:</strong><br>

<span class="second">
<span>Ic</span>
<span>o</span>
<span>n</span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Third:</strong><br>

<span class="third">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Fourth:</strong><br>

<span class="fourth">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>&nbsp;Utility Tests</span>
</span>

Answer 2

, . , . , font-size:0 to h1, span display:inline-block.

h1{
  text-transform:uppercase;
  font-weight:normal;
  font-size:0;
}
.u-text-color-md-pink-a200{
  color:#FF4081;
}
.u-font-weight-900{
  font-weight:bold;
}
h1 span{
  font-size:30px;
}

<h1>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
  <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
  <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>
</h1>

Answer 3

You can still use <span>and apply a negative margin to it.

#one{
  color:#ff0000;
}
#two{
  color:#ff0000;
  margin:0 -0.04em;
}
div { 
  font-size: 3em; background: blue; display: inline-block; 
}

<!--Old Span-->
<div>ST<span id="one">A</span>CKOVERFLOW</div>
<!--New Span-->
<div>ST<span id="two">A</span>CKOVERFLOW</div>
<!--Original-->
<div>STACKOVERFLOW</div>

Run code