擬似要素の使い方

2020年12月20日CSS

擬似要素を使いこなせると、よりおもしろい表現が可能になるので、ぜひ使いこなせるようになりましょう。

擬似要素について

擬似要素は、要素の特定の部分をスタイリングするときに使います。
疑似要素には、いろんな種類があります。
特に、以下の疑似要素はよく使います。

  • ::after (:after)
  • ::before (:before)
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)

疑似要素は、疑似クラスと分けるために、コロンを2つ使います。

コロン一つでも認識される場合が多いのですが、疑似要素はコロンを2つにして使うようにクセづけておきましょう。

before, after疑似要素の使い方

before, after疑似要素は、contentプロパティが必ず必要になります。

contentプロパティに何も入れない場合は、content: ' -';とすればOKです。

contentプロパティにattribute属性を追加して上げると、HTMLで指定したカスタムデータ属性の値を表示させることが可能です。

カスタムデータ属性とは？
HTMLでは、「data-」で始まっている属性には、独自の名前をつけていいよというルールになっています。
この独自の属性のことを、カスタムデータ属性とよびます。
  <h1 data-subtitle=" - 追加したMain Title">h1見出し</h1>
  <p>疑似要素のサンプル文です。</p>
  <h2 data-subtitle=" - 追加したSub Title">h2見出し</h2>
  <p>疑似要素のサンプル文です。</p>
h1::before,
h2::before {
  content: '- ';
}

h1::after,
h2::after {
  content: attr(data-subtitle);
}

CSS

Posted by devsakaso