今回は、もはや装飾に不可欠と言っても良い疑似要素beforeやafterについてのことを書いてみようと思います。
普段の使い方
hoverの装飾やアイコンとして活用することが多いです。
contentはだいたい下記のように空指定で、背景画像を設定したりborderを駆使してアイコン化したりしています。
p:after {
content:"";
}
ちなみに下記のように画像を直接設定も出来ますがいまいち使い勝手が良くないので背景画像を頼ることが多いです。
アイコンフォントっていう選択肢もありますが毎度の用意がちょっと面倒なので僕はあまり使ってないです。
p:after {
content: url("../images/icon.png");
}
ただ時々、contentにちゃんとテキストデータを設定しなきゃいけないことがありまして。
そうなると疑似要素をつける要素に対して個別にclassを指定しなきゃいけないのが面倒だなぁと思っていたんですがこれちゃんと解決策がありました。
attr()でDOMの属性値を設定できる
下記のようにcontentに対してattrを設定することでDOMに設定した文字列をcontentに設定することが出来ました。こちら下記ではdata属性にしていますがaltやsrcでも可能です。
これで文言が異なる要素でもDOMの属性を変えるだけでデザインを適用することが出来ます。CSSをいじらなくて良いのが素晴らしい。
<p data-text="After">After</p>
p:after {
content: attr(data-text);
}
これを使うとインタラクションの面でも色々扱いやすいことがあって、ドロップシャドウアニメーションや文字のリニアワイプ色変更などが比較的スマートに実装できます。
htmlがごちゃごちゃするの嫌いなのでこれらを使ってシンプルな構築を心がけたいです。
