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

【CSS入門】::before疑似要素を使って要素の前にコンテンツを挿入する方法

CSSの ::before 疑似要素を使用すると、任意の要素の直前にコンテンツ（テキストや画像など）を挿入できます。HTMLを変更することなく、装飾的な記号やアイコンを追加したい場合に非常に便利な機能です。

基本的な使い方

::before 疑似要素は、content プロパティと組み合わせて使用します。挿入したいコンテンツの種類に応じて、文字列・画像URL・カウンターなどを指定できます。

主な指定例

  • 文字列：content: "→";
  • 画像：content: url(画像のパス);
  • 空のコンテンツ：content: "";（装飾用のブロックを作る際によく使用）

サンプルコード

以下のコードでは、すべての <p> 要素の前に画像（bullet.gif）が表示されます。実際にブラウザで実行して、動作を確認してみてください。

<html>
   <head>
      <style>
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> この行の前にはビュレット（黒丸）が表示されます。</p>
      <p> この行の前にはビュレット（黒丸）が表示されます。</p>
      <p> この行の前にはビュレット（黒丸）が表示されます。</p>
   </body>
</html>

実行結果

上記のコードを実行すると、各段落の先頭に指定した画像が表示され、箇条書きのような見た目になります。

補足：:before と ::before の違い

CSS2までは単一コロン（:before）の表記でしたが、CSS3からは疑似クラスと疑似要素を区別するためにダブルコロン（::before）の表記が推奨されています。現在の主要ブラウザではどちらの表記もサポートされていますが、新しいコードを書く場合は ::before を使用しましょう。

  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: "