HTML の ::before セレクター

1. CSS ::before 疑似要素
2. ::before を使用して、HTML の要素の前にコンテンツを追加する

この記事では、CSS の ::before 疑似要素を紹介し、HTML でのそのアプリケーションを調べます。

CSS ::before 疑似要素

::before セレクターは、選択した要素または複数の要素の前にコンテンツを挿入するために使用できる CSS 疑似要素です。 デフォルトではインラインです。

content プロパティには、多くの場合、::before セレクターが付属しています。 このプロパティを使用すると、::before セレクターで指定された場所にコンテンツを追加できます。

これらのプロパティを使用すると、HTML コードを変更することなく、HTML ドキュメント内の選択した場所にコンテンツを追加できます。 セレクターの本文に追加されたコンテンツに CSS スタイルを適用できます。

::before セレクターの構文を以下に示します。

selector::before{
    /*Css Properties*/
}

たとえば、段落の前にコンテンツを追加する場合は、次のように記述します。

p::before{
    /*Css Properties*/
}

HTML で段落を書いたが、見出しが抜けていたとします。 このような状況では、::before 疑似要素を使用して、段落の前に見出しを追加できます。

content プロパティを使用して見出しを作成し、スタイルを追加できます。

後のセクションでは、::before 疑似要素を実際に使用できるようになります。

::before を使用して、HTML の要素の前にコンテンツを追加する

::before を使用して要素の前にコンテンツを追加する方法の例を見てみましょう。

たとえば、コンテナ div1 を作成します。 次に、<ol> を使用して、3つの項目を含む順序付きリストを作成します。

<li> タグを使用して、任意の項目をランダムに記述します。

コード例:

<div class = "div1">
    <ol>
        <li>Point One</li>
        <li>Point Two</li>
        <li>Point Three </li>
    </ol>
</div>

出力はほぼ予測可能です。 これは、3つの項目を含む順序付きリストです。

HTML ドキュメントを変更せずに、リストの前にいくつかの項目を追加します。

CSS で、div1 を .div1::before として ::before 疑似要素を使用してセレクターを作成します。 セレクターの本体で、content プロパティを使用し、その値に任意のコンテンツを書き込みます。

コンテンツとしてアスタリスクの行を考えてみましょう。

次に、各リスト項目の前に何かを追加しましょう。 li 要素を選択し、::before 疑似要素を使用する必要があります。

.div1 li::before として要素を選択し、content プロパティを使用して、その値として '\2192' を追加します。 値 '\2192' は、右矢印のエンティティ番号です。

.div1::before{
    content:'*************************';
    background: yellow;
}
.div1 li::before{
    content: '\2192';
}

リストの前に、div1 の内容の前にアスタリスク (*) の行がどのように形成されるかを観察します。 また、順序付きリストの各ポイントの前に、右矢印を挿入しました。

これは、::before 疑似要素が CSS の content プロパティとともにどのように動作するかです。