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

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

CSSの:before（現在は::beforeと表記されるのが一般的）疑似要素を使うと、HTMLを変更することなく、指定した要素の直前にコンテンツを挿入できます。挿入できるのはテキストだけでなく、画像URLなども可能です。

この疑似要素は、リストの先頭にアイコンや箇条書きマークを付けたい場合などに特に便利です。以下の例では、:beforeを使ってすべての段落（<p>要素）の先頭に画像（bullet.gif）を表示しています。

使用例

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

コードの解説

この例では、セレクタとしてp:beforeを指定しています。これにより、ページ内のすべての<p>要素の内容が表示される直前に、contentプロパティで指定された画像ファイル（/images/bullet.gif）が挿入されます。その結果、3つの段落それぞれの先頭に箇条書き用のマークが自動的に表示されます。

ポイント

:before疑似要素を使用する際は、必ずcontentプロパティを一緒に指定する必要があります。contentがない場合、擬似要素は生成されません。また、CSS3以降では二重コロンを使った::beforeという記法が正式な構文とされていますが、古いブラウザとの互換性のため、単一コロンの:beforeも引き続きサポートされています。

  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-