どうも7noteです。文字数に比例しておなじだけ下線の色が変わる方法。
動きつけると更に面白いかもしれませんね。使い時が少ないかもですが・・・
![sample.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fa413a195-0c27-7828-d68c-1d085f3903de.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b5cf046e1d9e7cffe23b5ee7e887eca5)
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の黄色い下線が重なることで、文字数分だけ色が変わる下線になります。
おまけ
動きを付けると見ている人にもすごい感が伝わるかも。