Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8591

≪CSSデザイン案≫途中で色の変わる下線のもうワンランク上の下線「文字数分だけ色が変わる下線」

$
0
0

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

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

sample.png

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の黄色い下線が重なることで、文字数分だけ色が変わる下線になります。

おまけ

動きを付けると見ている人にもすごい感が伝わるかも。

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)


Viewing all articles
Browse latest Browse all 8591

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>