【CSS】 疑似要素の「content」の値を「HTML」で指定する

こんにちは、さち です。

今回は「CSS」で、疑似要素 ::before ::after に設定する content の値を、親要素の「属性」から取得する方法について書いていきます。

CSS だけで簡単にできますよ。

サンプルコード

HTML

<div class="unit" data-gen="101期生">
  <span>大賀美 沙知</span>
</div>

<div class="unit" data-gen="102期生">
  <span>乙宗 梢</span>
  <span>夕霧 綴理</span>
  <span>藤島 慈</span>
</div>

CSS

.unit {
  position: relative;
  border: 4px solid pink;
}

.unit::before {
  content: attr(data-gen);
  position: absolute;
  top: -1em;
  left: 1em;
  background: white;
}

content の値を attr() にして、カッコ内に親要素が持つ「属性」の名前 data-gen を記述することで、その属性に設定されている「値」を引用できます。

ちなみに、「attr」は「attribute（属性）」の略です。

結果

::before の content の値が、それぞれの親要素が持つ属性 data-gen の値になっています。

この方法を使えば、HTML の「属性値」を変えるだけで content の値を変えられます。とっても便利ですね。