CSSの擬似要素:beforeと:afterを駆使して、スタイリッシュなWebデザインを構築しよう！ - 基礎から応用まで徹底解説

CSSにおける擬似要素セレクタ :before と :after とは？

CSS では、以下の構文を使用して :before と after を定義します。

selector::before {
  /* スタイル定義 */
}

selector::after {
  /* スタイル定義 */
}

Sass は、CSS をより記述的かつ効率的にするための拡張言語です。 Sass では、& (アンパサンド) を使用して親セレクタを参照することができます。 これにより、:before と :after のスタイルを親セレクタと一致させることが容易になります。

:before と :after の例

例 1：要素の前に三角形を追加する

.button {
  position: relative; /* 要素を相対位置に配置 */
  display: inline-block; /* 要素をインラインブロック要素として表示 */
  padding: 10px 20px; /* 要素内側の余白を設定 */
  background-color: #4CAF50; /* 背景色を設定 */
  color: white; /* テキストの色を設定 */
  text-decoration: none; /* テキスト装飾を解除 */

  &::before {
    content: ""; /* コンテンツを空にする */
    position: absolute; /* 絶対配置にする */
    top: 50%; /* 上部中央に配置 */
    left: -10px; /* 左側に 10px 配置 */
    transform: translateY(-50%); /* 垂直方向に中央揃え */
    border: 8px solid transparent; /* 境界線を透明にする */
    border-top-color: #4CAF50; /* 上部の境界線の色を設定 */
  }
}

この例では、.button クラスを持つ要素の前に三角形を追加します。 三角形は ::before 擬似要素を使用して作成され、親要素の位置とサイズに基づいて配置されます。

.box {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 要素の下に配置 */
  }

  &::before {
    background-color: rgba(0, 0, 0, 0.1); /* 半透明の黒い背景色を設定 */
  }

  &::after {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明の白い背景色を設定 */
  }
}

:before と :after 擬似要素は、CSS で要素を装飾するための強力なツールです。 Sass を使用することで、これらの擬似要素をより記述的かつ効率的に使用することができます。

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-top-color: #4CAF50;
  }
}

.box {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  &::before {
    background-color: rgba(0, 0, 0, 0.1);
  }

  &::after {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

例 3：ナビゲーションメニューに矢印を追加する

nav ul li {
  position: relative;
  display: inline-block;

  a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #000;
  }
}

nav ul li:last-child::after {
  content: none;
}

.social-media-buttons {
  display: inline-block;

  .button {
    display: inline-block;
    margin: 5px;
    padding: 10px 15px;
    background-color: #eee;
    text-decoration: none;
    color: #000;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      transition: background-color 0.3s ease;
    }

    &:hover::before {
      background-color: #ccc;
    }
  }
}

この例では、ソーシャルメディアボタンにホバー効果を追加します。 ホバー効果は ::before 擬似要素を使用して作成され、ボタンの上にマウスポインタが置かれたときにボタンの背景色が薄くなります。

これらの例はほんの一例です。 :before と :after 擬似要素を使用して、さまざまな種類の装飾を作成することができます。

追加情報

• 【Sass】疑似要素使うときは&

CSSにおける :before と :after の代替方法

隣接要素を使用して、要素の前後にコンテンツを追加することができます。 これを行うには、以下の方法を使用します。

.element {
  position: relative; /* 要素を相対位置に配置 */
}

.before-element {
  content: "[コンテンツ]";
  position: absolute; /* 絶対配置にする */
  top: 0; /* 上部に配置 */
  left: -50px; /* 左側に配置 */
  transform: translateY(-50%); /* 垂直方向に中央揃え */
}

.after-element {
  content: "[コンテンツ]";
  position: absolute; /* 絶対配置にする */
  top: 0; /* 上部に配置 */
  right: -50px; /* 右側に配置 */
  transform: translateY(-50%); /* 垂直方向に中央揃え */
}

この方法の利点は、HTML 構造を変更する必要がないことです。 ただし、:before と :after 擬似要素ほど柔軟ではありません。

SVG アイコンを使用する

複雑な装飾やアイコンを追加したい場合は、SVG アイコンを使用することができます。 SVG アイコンは、ベクターグラフィックであり、サイズを変更しても品質が劣化しません。

.element::before {
  content: url("[SVG アイコンの URL]");
  position: absolute;
  top: 0;
  left: -50px;
  transform: translateY(-50%);
}

この方法の利点は、非常に柔軟で、複雑な装飾を作成できることです。 ただし、:before と :after 擬似要素よりもパフォーマンスが低下する可能性があります。

.element {
  background-image: url("[背景画像の URL]");
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-position: left top; /* 左上に配置 */
}

Pseudo-elements を使用しない

場合によっては、擬似要素を使用せずに、コンテンツや装飾を追加する方法があります。 例えば、ボタンに矢印を追加したい場合は、Font Awesomeのようなアイコンフォントを使用することができます。

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;

  &::after {
    content: "\f00d"; /* Font Awesome の矢印アイコン */
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}

:before と :after 擬似要素は、要素を装飾するための強力なツールですが、常に最適な方法とは限りません。 上記の代替方法を検討することで、より効率的で効果的な方法を見つけることができるかもしれません。