javascript

CSSの:first-lineはあるのに:last-lineがない問題


タイトルのとおりですが、ブロック要素の1行目のみにスタイル指定できる「:first-line」擬似要素というものがあります。
でも、最終行だけとか、n番目の行とかを指定する「:last-line」だとか「:nth-line()」とかはないんですね。
それを解決するライブラリを見つけたので使ってみました。

See the Pen LRLoQK by natsumi (@mayo31) on CodePen.18228

適用したい要素に「data-lining」カスタム属性を追加。
data-liningの子要素として、HTML上には存在しない「.line」が自動で生成されることになります。
CSS側ではこの.lineに対してカスタムセレクタを使ってスタイルを指定します。

どういうときにこれを使うんだかわかりませんがなんかのときのためにメモ。

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です