css擬似要素をattr()で取得する方法

はじめに

cssの擬似要素（:beforeや:after）の活用法は多岐に渡りますが、本日はその中でもcontent内の要素をattrを用いて、htmlより取得してみようと思います。

いちいち取得したい内容ごとにcssを記載しなくて済むようになるので、htmlとcssをはっきり分岐できる点で是非とも覚えておきたい方法です。

一般的な擬似要素

通常、cssの擬似要素は以下のような指示を与えると思います。

<p>SAMPLE</p>

p:after { content: '擬似要素'; }

上記の記載で、pタグ内の最後に擬似要素が加わるわけですが、要素ごとに擬似要素を変えたい場合が以下のような記述が必要になります。

<p class="sample1">SAMPLE1</p>
<p class="sample2">SAMPLE2</p>

p.sample1:after { content: '擬似要素1'; }
p.sample2:after { content: '擬似要素2'; }

上記の例では２つだけなのでさして問題はないですが、これが5~6つと増えていくといちいちクラス指定をして、cssの記述量を増やしてと少し面倒くさい作業になってしまいます。
そこで上記を以下のように書き換えることで、cssの記述をすっきりさせることが可能になります。

<p data-text="sample1">SAMPLE1</p>
<p data-text="sample2">SAMPLE2</p>

p:after { content: attr(data-text)""; }

このように記述することで、html側で設定したdata-textの内容をcss内のattr(data-text)で取得することが可能になります。

attrを用いた擬似要素取得の応用

それでは、擬似要素がattrで取得できるということがわかったところで実際にこれを応用してみましょう。
おそらく一番用いられるであろう、ナビゲーションとマウスオーバー時の切り替えをattrを用いて実装してみましょう。

<ul>

 <li data-text="要素１"><span>要素１</span></li>

 <li data-text="要素２"><span>要素２</span></li>

 <li data-text="要素３"><span>要素３</span></li>

 <li data-text="要素４"><span>要素４</span></li>

 <li data-text="要素５"><span>要素５</span></li>

 </ul>

li { position:relative; }

 li>span { opacity:1; }

 li:hover>span { opacity:0; }

 li:after { content: attr(data-text)""; position:absolute; left:0; bottom:-1rem; opacity:0; }

 li:hover:after { content: attr(data-text)""; position:absolute; left:0; bottom:0; opacity:1; }

上記の指示では、マウスオーバー時にspanタグ内の文字を消し、擬似要素が出てくるようにしてあります。
ここにtransitionやanimationなんかを用いることで面白い実装ができそうですよね。

当メディアでも簡単なものを実装してみたので、カテゴリーナビゲーションにマウスオーバーしてみてください。