🎨
【HTML】【CSS】文字色を変更できない！？
リセットCSSにより隣の文字色が影響してしまう現象と対策について
経緯
41歳未経験でプロのエンジニアを目指すための一環として、ポートフォリオ制作でタイピングアプリを作成していたんですが、打ち間違っている文字をspanタグで括りcssで色を変える処理を実装していたんですが、間違う文字の前が「f」で、間違う文字も「f」の時（つまりffと連続入力された時の後ろのfの文字色を変えるとき）に変色表示できない謎現象に躓いてしまいました。
index.html
<div id="ans_box">f<span>f</span>fff</div>
style.css
.ans_box span { color: red;}
原因
firefoxで表示してみたところ、色が変わっているはずの「f」の右側が少しだけ赤になっているのを発見しました。もしやと思いletter-spacingで文字間をあけてやると正常に表示されました。
これは、リセットCSSにより文字間隔がリセットされた為、前の文字と表示範囲が重複（「f」や「i」という文字幅の細いものだけ）してしまい前の文字色が表示されるのが原因だったみたいです。
対策
letter-spacingで文字間を少し広げてやると正常に表示されます！
Discussion