CSSの::beforeと::after擬似要素の使い方

CSSには、要素の前後にコンテンツを挿入するための便利な擬似要素があります。それが::beforeと::afterです。このブログでは、これらの擬似要素の使い方と、その活用例について詳しく解説します。

::beforeと::afterの基本

::beforeと::afterは、指定した要素の前後にコンテンツを追加するための擬似要素です。これらを使うと、HTMLを変更せずに視覚的な装飾を加えることができます。

.element::before {
    content: "Before";
}

.element::after {
    content: "After";
}

上記のCSSは、<div class="element"></div>の前に「Before」という文字列を、後ろに「After」という文字列を追加します。

使用方法の例

見出しに画像を追加する方法

h2 {
  position: relative;
}

h2:before {
  content: "";
  width: 110px;
  height: 110px;
  background: url(画像URL) no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

このコードは、h2タグの前に画像を追加する方法を示しています。具体的には、以下のような手順で行われます：

1. h2タグに対してposition: relative;を設定します。これにより、h2タグを基準にして位置を調整することができます。
2. h2:beforeで、疑似要素を作成し、content: "";で内容を空にします。
3. 画像のURLを指定し、backgroundプロパティで画像を背景として設定します。
4. background-size: 100%;で画像を要素のサイズに合わせて調整します。
5. position: absolute;で、画像の位置を絶対位置に設定し、left: 0;で左端に配置します。
6. top: 50%;で縦方向の中央に配置し、transform: translateY(-50%);で要素の高さの半分だけ上に移動させて、完全に中央に配置します。

見出しに線を追加する方法

h2:before {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 40px;
  background: #ccc;
  height: 2px;
  left: 0;
  right: 0;
  margin: auto;
}

こちらのコードは、h2タグの下部に線を追加する方法を示しています。以下の手順で行います：

1. h2:beforeで、疑似要素を作成し、content: "";で内容を空にします。
2. position: absolute;で、線の位置を絶対位置に設定し、bottom: 0px;でh2タグの下端に配置します。
3. width: 40px;で線の幅を40ピクセルに設定します。
4. background: #ccc;で線の色を指定します。
5. height: 2px;で線の高さを2ピクセルに設定します。
6. left: 0; right: 0;で線を水平方向に中央に配置し、margin: auto;で中央揃えにします。

注意点

• contentプロパティを使用する必要があります。contentプロパティが設定されていない場合、::beforeと::afterは何も表示しません。
• これらの擬似要素は、ブロックレベルおよびインライン要素に対して使用できますが、適切な表示を得るためにはスタイルの調整が必要です。

まとめ

CSSの::beforeと::after擬似要素を使うと、HTMLを変更せずに視覚的な装飾を追加することができます。これらを活用することで、より豊かで洗練されたデザインを実現することができます。