WEMOブログ向けWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。2019.08.15今回は、CSSで複数行に渡るテキストにマーカーを引いたような表現を実装していきます。複数行に渡ってラインマーカーを引ける代わりに、マウスホバー時のアニメーションはできません。マウスホバー時にラインマーカーを引くようなアニメーションは以前別の記事でメモしましたので、そちらを参考にしてみてください。あわせて読みたいマウスホバー時にラインマーカーを引くようなアニメーションをCSSで表現してみる今回はポップな小技をメモ。以下のように、マウスホバー時にテキストにラインマーカーを引くようなアニメーションを表現してみます。前回のCSSマーカーの問題点まずはじめに、前回の方法(擬似要素を使ったもの)ではなぜ複数行の場合にマーカーを引けないのかを説明しておきます。次の画像をご覧ください。複数に渡るテキストの場合、それらを囲んだエリアの一番下にのみマーカーとなる擬似要素が配置されます。実際に2行以上の文章に擬似要素を使ってマーカー線を表現してみます。spanタグ:1行目の文章だよ〜だよ〜〜。2行目の文章だよ〜だよ〜。pタグ:1行目の文章だよ〜だよ〜〜。2行目の文章だよ〜だよ〜。このように、1行目にはラインが引かれません。pタグなどのブロック要素に適用させると、より擬似要素の挙動がイメージしやすくなるかと思います。background:linear-gradientを使用します。して指定してあげることです。下部分をオレンジ色(#ffdfbd)に指定しています。実際にこのCSSを指定してみると次のようになります。2行目の文章だよ〜だよ〜。普通の文章中で強調したい部分にだけマーカーを引く時、強調部分が改行されたとしてもこの方法だとちゃんとマーカーを引くことができます。無事に各行にマーカーを引くことができています。inline要素じゃないと複数行にはうまくマーカーが引けないことです。inline-blockやblockではダメみたいです。※table系は検証してないです。backgroundプロパティの挙動の様子を比較したものです。backgroundプロパティの挙動の様子このように、inline要素の場合はbackgroundは各行ごとに適用されるのですが、block要素などは全体に対して適用されます。background:linear-gradientについてもう少し詳しく今回のようなシンプルな使い方だと、linear-gradientで指定している各値は次のような意味になります。いくつか例を挙げてみようと思います。