CSS ::beforeと::after - 生成コンテンツガイド

::beforeと::after擬似要素

::beforeと::after擬似要素は、選択された要素の先頭と末尾に仮想子要素を作成します。contentプロパティが必要で、装飾的・機能的な目的に非常に多用途です。

構文

.element::before {
  content: "接頭辞";
  /* 追加スタイル */
}

.element::after {
  content: "接尾辞";
  /* 追加スタイル */
}

contentプロパティ

contentプロパティは必須です — これがないと擬似要素はレンダリングされません：

content: "テキスト";           /* 文字列 */
content: "";               /* 空（装飾用） */
content: attr(data-label); /* 属性から */
content: url(icon.svg);    /* 画像 */
content: counter(item);    /* CSSカウンター */
content: "(" attr(href) ")"; /* 組み合わせ */

装飾要素

/* 見出しの下の装飾線 */
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #3b82f6;
  margin-top: 8px;
}

アイコンインジケーター

/* 外部リンクインジケーター */
a[href^="https://"]::after {
  content: " \2197"; /* ↗ 矢印 */
  font-size: 0.8em;
}

/* 必須フィールドインジケーター */
label.required::after {
  content: " *";
  color: red;
}

詳細度

::beforeと::afterはどちらも1つの要素セレクターに相当する詳細度を持ちます：(0, 0, 1)。

アクセシビリティの警告

::beforeと::afterで追加されたコンテンツは、スクリーンリーダーにとって一般的に信頼性のある方法でアクセシブルではありません。重要なコンテンツには擬似要素を使用せず、装飾的または補足的なビジュアルのみに使用してください。