どうも7noteです。文字数に比例しておなじだけ下線の色が変わる方法。

動きつけると更に面白いかもしれませんね。使い時が少ないかもですが・・・

index.html

<p><span>こんばんわ</span></p>
<p><span>おはようございます</span></p>
<p><span>今日はいい天気ですね</span></p>

style.css

p {
  font-size: 18px;
  font-weight: bold;
  position: relative;
}

p span{
  display: inline-block;             /* ここ大事。ないと崩れる。 */
  border-bottom: 6px solid #ffc778;  /* 黄色い線 */
  text-align: left;
}

p span::after {
  width: 100%;
  height: 6px;
  content: '';
  background: #91ceeb;               /* 青い線の方 */
  position: absolute;
  bottom: 0;
}

疑似要素を使って、幅いっぱいの下線を後ろに入れています。
その上にspanの黄色い下線が重なることで、文字数分だけ色が変わる下線になります。