:before / :after疑似クラス

要素名:before、または要素名:afterと記述すると、要素の内容の前、または後に指定したコンテンツを挿入する疑似要素となる。
挿入内容はcontentプロパティで指定する。

p.note:before {
  content: url(image/note-icon.png);
  margin: 0 2px;
}

上記の例は、class名にnoteを持つp要素にスタイルを適用し、p要素の前にノートのアイコンを挿入している。

contentプロパティ

contentプロパティは:before、:after疑似要素を対象にコンテンツを挿入する。

none，nomalコンテンツを挿入しない。
任意の文字列任意の文字列がそのまま挿入される。引用符(“)で囲んで記述する。
url()関数型の値。括弧内に指定したURLのファイルを挿入する。
counter()関数型の値。括弧内に「カウンター名」を指定して、要素に連番を付ける。counter-incrementプロパティと併記して使う。
attr()関数型の値。括弧内に指定した属性名の値が挿入される。

attr()関数

attrは、javascriptのようにhtmlからデータを取得することができる関数。
このCSS関数を利用すると、contentプロパティを使ってHTMLソース内の情報を参照することができる。
この関数により読み出す文字列をCSS内に書く必要がなくなり、修正はHTML側だけで済む。

以下の例は、ナビゲーションメニューで日本語と英語を一緒に表示させ、英語を大きく、その下に日本語を小さく表示させてデザインしている。

<div class="attr">
  <ul>
    <li><a href="#" data-text="ホーム">Home</a></li>
    <li><a href="#" data-text="会社概要">Corp</a></li>
    <li><a href="#" data-text="実績紹介">Example</a></li>
    <li><a href="#" data-text="ブログ">Blog</a></li>
    <li><a href="#" data-text="お問い合わせ">Contact</a></li>
  </ul>
</div>
.attr ul li a::after {
  content: attr(data-text);
  display: block;
  margin-top: .7em;
  color: #aaa;
  font-size: 11px;
}

【参考】
https://lpeg.info/html/css_attr.html

inserted by FC2 system