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

CSSの:after疑似要素を使って要素の後にコンテンツを挿入する方法

CSSの:after疑似要素を使用すると、指定した要素の内容の後に、テキストや画像などのコンテンツを追加できます。HTMLを変更することなく、CSSだけで装飾的な要素を追加できるため、リストの装飾や注釈の表示などに広く活用されています。

基本的な使い方

:after疑似要素は、contentプロパティと組み合わせて使用します。contentプロパティには、文字列やURLで指定した画像などを設定できます。

サンプルコード

以下のコードを実行すると、各段落（p要素）の後にビュレット画像（bullet.gif）が挿入されます。

<html>
   <head>
      <style>
         p:after {
            content: url(/images/bullet.gif);
         }
      </style>
   </head>
   <body>
      <p>この行の後にビュレットが表示されます。</p>
      <p>この行の後にビュレットが表示されます。</p>
      <p>この行の後にビュレットが表示されます。</p>
   </body>
</html>

実行結果

上記のコードをブラウザで表示すると、各段落のテキストの直後にビュレット画像が表示されます。すべてのp要素に同じスタイルが適用されるため、個別にHTMLへ画像タグを記述する必要がありません。

補足：モダンな記述方法

CSS3以降では、疑似要素を表す際にコロンを2つ重ねた::afterという記述が推奨されています。古いブラウザ（IE8など）との互換性が必要な場合を除き、::afterを使用するとよいでしょう。

また、contentプロパティには画像URL以外にも、次のような値を指定できます。

  • 文字列：content: "→"; のように、任意のテキストを追加
  • 属性値：content: attr(href); のように、要素の属性値を表示
  • カウンタ：content: counter(item); のように、連番を自動生成

:after疑似要素を活用することで、HTMLの構造をシンプルに保ちながら、柔軟なデザイン表現が可能になります。

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

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

  2. CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説

    CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "