どうも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;}pspan{display:inline-block;/* ここ大事。ないと崩れる。 */border-bottom:6pxsolid#ffc778;/* 黄色い線 */text-align:left;}pspan::after{width:100%;height:6px;content:'';background:#91ceeb;/* 青い線の方 */position:absolute;bottom:0;}疑似要素を使って、幅いっぱいの下線を後ろに入れています。
その上にspanの黄色い下線が重なることで、文字数分だけ色が変わる下線になります。
おまけ
動きを付けると見ている人にもすごい感が伝わるかも。
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）