::before CSS擬似要素

CSSの「::before」擬似要素を使うと、選択した要素の前に文字列や画像を挿入することができます。この記事では、疑似要素の使い方をサンプルを交えてご紹介します。

疑似要素（pseudo classes）とは、要素の一部に対してスタイルを適用できるセレクタである。

書式

指定した要素タイプの仮想的な最初の子要素

element::before {
  /* properties */
}

指定した要素タイプのうち、指定したクラスを持つ要素の仮想的な最初の子要素

element.class::before {
  /* properties */
}

指定したクラスを持つ要素の仮想的な最初の子要素

.class::before {
  /* properties */
}

指定したIDの要素の仮想的な最初の子要素

#id::before {
  /* properties */
}

要素の前に文字を挿入する

::before 疑似要素を使ってパンくずリストを実現する例を次に示す。

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
  margin-bottom: 1rem;
  list-style: none;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: .5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: .5rem;
  content: "/";
}

パンくずリスト項目の前に区切り文字を入れるために、::before 疑似要素を使用している。ただし、先頭の項目の前に区切り文字は不要なので、兄弟要素のうち弟要素の前にだけ区切り文字を入れる。

パンくずリストの構造は、HTMLで次のように記述する。

<nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">SE学院</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/css/">CSS</a>
    </li>
    <li class="breadcrumb-item">
      ::before疑似要素
    </li>
  </ol>
</nav>

上記のHTMLはウェブブラウザで次のように表示される。

要素の前にアイコン画像を挿入する

::before CSS擬似要素を用いて、マッチする要素の前にアイコン画像を挿入することができる。

CSSではマッチする要素の条件を指定する。

a.external::before {
  content: url(/css/img/external-site.png);
  margin-right: .5em;
}

挿入する画像のURLを content プロパティに指定する。

<a href="https://tsuker.net" class="external">資産運用のすゝめ</a>

上記のHTMLはウェブブラウザで次のように表示される。

資産運用のすゝめ

要素の前に引用符を挿入する

::before CSS擬似要素を用いて、マッチする要素の前に引用符を挿入することができる。

CSSではマッチする要素の条件を指定する。

blockquote::before {
  content: open-quote;
}

content プロパティには、開始引用符を表す「open-quote」を指定する。挿入するテキストにHTMLタグを含めることはできない。

HTMLでは次のように記述する。

<blockquote>
  天地初めて發けし時、高天原に成れる神の名は、天之御中主神。
</blockquote>

上記のHTMLはWebブラウザで次のように表示される。

天地初めて發けし時、高天原に成れる神の名は、天之御中主神。

要素の前に線を挿入する

::before CSS擬似要素を用いて、マッチする要素の前に線を挿入することができる。

CSSではマッチする要素の条件を指定する。

blockquote.line::before {
  content: "";
  border-left: 2px solid green;
  margin-right: .5em;
}

HTMLでは次のように記述する。

<blockquote class="line">
  天地初めて發けし時、高天原に成れる神の名は、天之御中主神。
</blockquote>

上記のHTMLはWebブラウザで次のように表示される。

天地初めて發けし時、高天原に成れる神の名は、天之御中主神。

::after

要素の後に文字やアイコン画像を挿入するには、::after 疑似要素を使う。

CSS疑似要素

他にも次のCSS疑似要素がある。