0Pricing
CSS Academy · レッスン

::beforeと::afterのコンテンツ

contentプロパティと::before、::afterを使って、要素の前後に生成コンテンツを挿入します。

「::beforeと::afterのコンテンツ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

擬似要素とは

擬似要素は、DOM の一部であるかのようにスタイル設定できる仮想要素を作成します。二重コロン :: を使用します。最もよく使われるのは ::before と ::after です。

::before と ::after

::before は生成されたコンテンツを要素のコンテンツの前に挿入します。::after は後に挿入します。どちらもレンダリングするには content プロパティが必要です。

<span class="element">Text with generated content</span>

contentプロパティ

contentプロパティでは、次の値を指定できます。

  • 文字列: content: "text"
  • 空の文字列: content: ""（装飾用の図形でよく使用します）
  • URL: content: url("icon.svg")
  • カウンター: content: counter(step)
  • attr(): content: attr(data-tooltip)

装飾的な引用符

HTMLに引用符を追加せず、組版用の引用符を追加します。

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

空のcontentによる図形

content: ""に位置とサイズを設定すると、HTMLを追加せずに装飾用の図形を作成できます。

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

::afterによるclearfix

従来のclearfixでは、余分なマークアップを追加せずにフロートを解除するために::afterを使用します。

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

::afterによるツールチップ

::afterとattr()を使用したCSSだけのツールチップです。

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

content: url()によるアイコン

content: url()を使用して、リンクの前に小さなアイコンを挿入します。

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

擬似要素の制限

擬似要素はDOMに含まれません。次のような性質があります。

  • ユーザーが選択したり検索したりできません
  • デフォルトではスクリーンリーダーからアクセスできません
  • JavaScriptから対象にできません

生成コンテンツに不可欠な内容を決して入れないでください。装飾目的にのみ使用してください。

単一コロンと二重コロン

単一コロン（:before）はCSS2の構文でした。二重コロン（::before）は、擬似要素と擬似クラスを区別するCSS3の標準構文です。現在のブラウザーではどちらも動作しますが、新しいコードでは二重コロンを使用してください。

::before/::afterをサポートする要素

置換要素（img、input、select、video）には、挿入先となるコンテンツ領域がないため、擬似要素を設定できません。代わりにラッパー要素を装飾に使用してください。

確認問題

表示するテキストがない装飾用の::before擬似要素には、どのcontent値が必要ですか？

まとめ

::beforeと::afterは、要素本来のコンテンツの前後に生成コンテンツを挿入します。contentプロパティは必須です。装飾用の図形、アイコン、引用符、ツールチップに使用できますが、ユーザーがアクセスしたり読んだりする必要のある意味のあるコンテンツには決して使用しないでください。

よくある質問

「::beforeと::afterのコンテンツ」レッスンは無料ですか？

はい。「::beforeと::afterのコンテンツ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「::beforeと::afterのコンテンツ」で何を学びますか？

contentプロパティと::before、::afterを使って、要素の前後に生成コンテンツを挿入します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「::beforeと::afterのコンテンツ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ::beforeと::afterのコンテンツ
  2. ::placeholder、::selection、::marker
  3. ::beforeを使ったCSSカウンター
  4. 疑似要素による装飾パターン
← CSS Academyに戻る