CSS 擬似要素

CSSマニュアル

2023.04.25

CSS擬似要素 (Pseudo-elements) は、要素の特定の部分にスタイルを適用するためのセレクターです。

擬似要素は2つのコロン (::) で始まり、要素名やクラス名の前に付けることで使用できます。

いくつかの代表的な擬似要素を紹介します。

::before

要素の内容の前に生成される子要素にスタイルを適用します。

要素の前に装飾やアイコンを追加するために使用されます。

<style>
  p::before {
    content: "【重要】";
    color: red;
  }
</style>

<p>この段落の前に赤色のテキストが追加されます。</p>

要素の内容の後に生成される子要素にスタイルを適用します。

要素の後に装飾やアイコンを追加するために使用されます。

<style>
  p::after {
    content: "※";
    color: blue;
  }
</style>

<p>この段落の後に青色のテキストが追加されます。</p>

要素の最初の文字にスタイルを適用します。

<style>
  p::first-letter {
    font-size: 24px;
    font-weight: bold;
  }
</style>

<p>この段落の最初の文字が大きく太字になります。</p>

要素の最初の行にスタイルを適用します。

<style>
  p::first-line {
    font-weight: bold;
    text-decoration: underline;
  }
</style>

<p>この段落の最初の行が太字で下線が引かれます。</p>

擬似要素を利用することで、要素の特定の部分にデザインを適用することができます。これらの擬似要素を組み合わせることで、さらに詳細なスタイルの調整が可能になります。