テキストの下半分のみに背景色を付けるCSSの紹介です。主に強調タグ（strong）に使われているポピュラーな装飾ですね～。
使うのはグラデーションを指定するlinear-gradientだけなので、記述するコードはたったの1行！
|
1 2 3 |
strong{ background: linear-gradient(transparent 60%, #ef9a9a 60%); } |
2つある60%の部分を大きい数値にすればするほど線が細くなりますが、個人的にはこのくらいがちょうど良いかなーと。
色も自由に決められますが、あまり濃い色を使うとテキストが読みにくくなるので注意が必要です。
それではいくつかサンプルを用意しましたので、色選びの参考にどうぞ。
実装が超簡単な上に視覚効果も抜群なので、ブログにちょっとしたアクセントを加えたい人は是非使ってみてください！
ただ、色の選定に注意するのと多用しすぎると逆に読みにくいというのをお忘れなく。
