Pseudo

7. 疑似要素の魔法 (::before & ::after)

::before と ::after は、HTMLを汚さずに装飾を追加する「魔法」です。
かつては空の <span> や画像を使っていた装飾が、今はCSSだけで実現できます。

🎮 疑似要素デモギャラリー
引用テキスト

::before で引用符

新機能

::after でバッジ

ツールチップ

::after で矢印

/* 引用符 */
.quote::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent);
  opacity: 0.3;
}

/* バッジ */
.badge::after {
  content: 'NEW';
  background: red;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 吹き出し矢印 */
.tooltip::after {
  content: '';
  border: 10px solid transparent;
  border-top-color: currentColor;
}

CSS Counter による自動ナンバリング

counter-reset と counter-increment で、HTMLに番号を書かずに自動でナンバリングできます。

プレビュー

  1. プロジェクトを初期化する
  2. 依存パッケージをインストール
  3. 開発サーバーを起動
  4. コードを書く
  5. デプロイ！

コード

ol {
  counter-reset: step;
  list-style: none;
}

li {
  counter-increment: step;
}

li::before {
  content: counter(step);
  /* 円形のスタイル */
}

📌 覚えておきたいポイント

  • content プロパティは疑似要素に必須（空でも content: ''）
  • ::before は要素の最初の子、::after は最後の子として挿入
  • content: attr(data-tooltip) でHTML属性の値を表示可能
  • position: absolute と組み合わせて配置を自由に
  • 疑似要素は装飾専用。重要なコンテンツには使わない（アクセシビリティ）
  • :: は CSS3 の記法。: は古い記法（互換性あり）