CSS擬似要素でHTMLを挿入

HTML、CSS、CSS セレクターにおける :before と :after を使用した HTML の挿入について

:before と :after は、CSS の擬似要素であり、指定した要素の前にまたは後にコンテンツを挿入するのに使用されます。

具体的な使い方

element::before {
  content: "This text is inserted before the element.";
}

element::after {
  content: "This text is inserted after the element.";
}

• content: 挿入するコンテンツを指定します。
• :before または :after: 挿入するコンテンツの位置を指定します。
• element: 挿入するコンテンツの対象となる要素のセレクターです。

例

HTML の <p> 要素の前にと後にテキストを挿入する例です。

<p>This is a paragraph.</p>

p::before {
  content: "Before: ";
}

p::after {
  content: " After";
}

この CSS を適用すると、HTML は以下のようにレンダリングされます。

<p>Before: This is a paragraph. After</p>

応用例

• ヒント
  ツールチップやポップアップを表示する。
• クォテーション
  引用符を挿入する。
• 番号付け
  リスト要素の前に番号を挿入する。
• 装飾
  アイコンや装飾的な要素を挿入する。

注意点

• :before と :after は、要素のスタイルを直接変更することはできません。スタイルを変更するには、別のセレクターを使用する必要があります。

:before と :after を使用した HTML の挿入の例

HTML

<p>This is a paragraph.</p>

CSS

p::before {
  content: "Before: ";
}

p::after {
  content: " After";
}

解説

• content: " After" は、挿入するテキストを指定します。
• p::after は、<p> 要素の後にコンテンツを挿入します。

結果

<p>Before: This is a paragraph. After</p>

CSS擬似要素でHTMLを挿入

<p>This is a paragraph.</p>

p::before {
  content: "Before: ";
}

p::after {
  content: " After";
}

• content プロパティを使用して、要素の前後にコンテンツを挿入します。
• p::before と p::after は、CSS の擬似要素です。

<p>Before: This is a paragraph. After</p>

:before と :after の代替方法

:before と :after は、HTML 要素の前後にコンテンツを挿入する便利な方法ですが、場合によっては他の手法も検討することができます。

HTML 要素の追加

• JavaScript による動的追加
  JavaScript を使用して、プログラム的に要素を追加します。
• 直接追加
  挿入したいコンテンツを直接 HTML コード内に記述します。

例

<p>This is a paragraph.</p>
<span>Before</span>
<span>After</span>