CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの::after疑似要素とは？要素の後にコンテンツを挿入する方法を解説

::after（旧表記：:after）は、CSSの疑似要素の一つで、指定した要素の直後にコンテンツを挿入するために使用します。HTMLを変更することなく、CSSだけで装飾やテキスト・画像などを追加できるため、Web制作で非常に便利な機能です。

::after疑似要素の基本

::afterを使用する際は、contentプロパティが必須です。contentには文字列、画像（url()）、カウンターなどを指定できます。contentを指定しない場合、疑似要素は表示されません。

使用例：画像を行末に追加する

次の例では、すべての<p>要素の直後に画像（bullet.gif）を表示しています。

<html>
  <head>
    <style>
      p::after {
        content: url(/images/bullet.gif);
      }
    </style>
  </head>
  <body>
    <p>この行の後ろに箇条書きマークが表示されます。</p>
    <p>この行の後ろに箇条書きマークが表示されます。</p>
    <p>この行の後ろに箇条書きマークが表示されます。</p>
  </body>
</html>

このコードを実行すると、各段落のテキストの直後に/images/bullet.gifで指定した画像が続けて表示されます。

文字列を挿入する例

画像だけでなく、文字列を挿入することも可能です。たとえば、リンクの後ろに「→」を自動的に付ける場合は次のように記述します。

a::after {
  content: " →";
}

:after と ::after の違いについて

CSS2までは単一コロン（:after::after）の表記が推奨されています。なお、古いブラウザとの互換性のため、:afterという表記も引き続き有効です。

主な活用シーン

  • 見出しやリンクにアイコンや矢印を自動的に追加する
  • clearfix（float解除）の実装
  • 吹き出しやバッジなどの装飾パーツを作成する
  • 必須項目を示す「*」などのラベルを追加する

::afterを活用することで、HTMLの構造をシンプルに保ちながら、柔軟なデザイン表現が可能になります。ぜひ実際の制作に取り入れてみてください。

  1. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

    CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-