【HTML】::before の概要と使い方について

::beforeとは？

::before は、指定した要素の内容の前に仮想の要素を追加し、そこにスタイルを適用するためのCSS疑似要素です。

これにより、HTMLを変更することなく、スタイルシートだけで特定の内容を追加できます。

使用例

基本的な使い方は以下の通りです。

以下の例では、すべての段落要素 <p> の前に星マーク（★）を追加しています。

p::before {
  content: "★ ";
  color: gold;
}

これにより、次のようなHTMLがあった場合

<p>これは例文です。</p>
<p>これは例文です。</p>

表示される内容は下記のようになります。

★ これは例文です。
★ これは例文です。

::before のプロパティ

::before でよく使用されるプロパティをいくつか紹介します。

• content: ::before の内容を指定します。テキストや特殊文字を追加する場合に使用します。
• color: 追加する内容の文字色を指定します。
• font-size: 文字の大きさを指定します。
• margin: 要素と追加された内容の間の余白を調整します。
• background-color: 背景色を指定します。

詳細な例

次に、もう少し複雑な例を紹介します。ここでは、リスト項目の前にチェックマークを追加し、色と余白を調整しています。

li::before {
  content: "✔ ";
  color: green;
  margin-right: 8px;
  font-weight: bold;
}

このCSSを使ったHTMLが以下のような場合

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

表示される内容は次のようになります：

✔ 項目1
✔ 項目2
✔ 項目3

まとめ

::before は、HTMLを変更せずに要素の前に追加の内容や装飾を加えるのに非常に便利なCSS疑似要素です。

これを使って、ウェブページの見た目をより豊かにし、ユーザーの視覚的な体験を向上させることができます。