知らないと少し損してそうな、attrを使った擬似要素 #CSS

割と知らない人もいたので共有。

概要

メニューボタンを作っていたら、構造がよろしくなかったのでそういえばattrってあった気がすると思い使ったら、スッキリ書けていい感じになった。

実装

See the Pen button hover animation by mild-tanama (@mild-tanama) on CodePen.

やったこと

上のようなボタンのアニメーションをかける時って、色違いのボタンを用意して重ねて、表示領域をアニメーションさせる、といったような実装が主流かと思います。その重ねるのって大方擬似要素の出番ですよね。もともとは以下のような感じで実装していました。

html

<ul class="menu">
  <li class="apple">APPLE</li>
  <li class="orange">ORANGE</li>
  <li class="banana">BANANA</li>
  <li class="pigeon">PIGEON</li>
</ul>

css

/* 諸々略 */
.menu li:before {
  /* 色々なスタイル・略 */
}
.menu li.apple:before {
  content: "APPLE";
}
.menu li.orange:before {
  content: "ORANGE";
}
.menu li.banana:before {
  content: "BANANA";
}
.menu li.pigeon:before {
  content: "PIGEON";
}

長い…
クラスがたくさんできてしまい、contentに文言を入れるだけの単調なcssが並んでしまう…
こんな風に、contentにいろんな文字が入るタイプのボタンだと面倒かつcssが長くなってしまいます。
そこで、今回紹介するattrを。

content: attr(data-text);

これを使えば、要素のカスタムデータ(今回の例ではdata-text)から文字を拾ってこられる…！
以下のような感じで簡単に文字を取ってきてくれます。

html

<ul class="menu">
  <li data-text="APPLE">APPLE</li>
  <li data-text="ORANGE">ORANGE</li>
  <li data-text="BANANA">BANANA</li>
  <li data-text="PIGEON">PIGEON</li>
</ul>

css

.menu li:before {
  content: attr(data-text);
  /* 色々なスタイル・略 */
}

さっきみたいにクラスをだらだら書かなくて済むのでコード短縮にもなり、また文言変更になった場合もhtmlの編集だけで済むのでかなり便利。

（2018/07/30追記）
コメントで頂いたように、attr(class)でつけてあるクラス名も取れます。ただ、スタイル当てたいわけではないので今回のような場合はカスタムデータを利用しています。
基本的にjQueryのattrと同じような感じで、指定してあげればその要素の指定した値が取得できるので有難い。。

メリット

コード短縮
文言変更に強い（運用しやすい）

デメリット

パッと浮かばないですね…何かあればお教えいただきたいです。

https://developer.mozilla.org/en-US/docs/Web/CSS/attr
一応全ブラウザ対応しております。（ただしcontentに使う場合のみ）

まとめ

とっても便利なので使っていきましょう！！