CSSで設定できる擬似要素

CSSで扱うことのできる擬似要素

CSSでは次の4種類の擬似要素が定義されています。

CSSのコードを使いながら、1つずつ解説していきます。

要素の先頭を指す「::before」と、末尾を指す「::after」

「::before」と「::after」は要素の開始と末尾を示す、対となる擬似要素です。
まずはリストに「::before」を使ってアイコンのような丸を作ってみましょう。

CSS コード例

ul {
  list-style-type: none;
}
ul li {
  margin-bottom: 5px;
  line-height: 1.4em;
}
ul li::before {
  display: inline-block;
  content: "";
  margin-top: 6px;
  margin-right: 7px;
  width: 10px;
  height: 10px;
  vertical-align: top;
  border-radius: 5px;
  background-color: #0062b5;
}
ul li:last-child {
  margin-bottom: 0;
}

HTML コード例

<section>
  <ul>
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
    <li>リストの項目4</li>
    <li>リストの項目5</li>
  </ul>
</section>

続いて、擬似要素「::after」を追加します。

CSS コード例

ul {
  list-style-type: none;
}
ul li {
  margin-bottom: 5px;
  line-height: 1.4em;
}
ul li::before {
  display: inline-block;
  content: "";
  margin-top: 6px;
  margin-right: 7px;
  width: 10px;
  height: 10px;
  vertical-align: top;
  border-radius: 5px;
  background-color: #0062b5;
}
ul li::after {
  display: inline-block;
  content: "";
  margin-top: 4px;
  margin-left: 7px;
  vertical-align: top;
  border-top: 7px solid #f7f7f7;
  border-bottom: 7px solid #f7f7f7;
  border-right: 6px solid #f7f7f7;
  border-left: 6px solid #0062b5;
}
ul li:last-child {
  margin-bottom: 0;
}

HTML コード例

<section>
  <ul>
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
    <li>リストの項目4</li>
    <li>リストの項目5</li>
  </ul>
</section>

擬似要素には背景画像を使って画像アイコンにしたり、テキストの前後に「"」をつけて引用文を作ったりなど、様々な使い方ができます。
また、HTMLを直接記述する必要がなく、CSSのみで表現できるところがポイントです。

テキストの先頭1行目を指す「::first-line」

擬似要素「::first-line」を使うと、テキストの先頭1行目のみにスタイルを適用することができます。

CSS コード例

p {
  color: #333;
  line-height: 1.6em;
}
p::first-line {
  color: #0068c0;
  font-size: 115%;
}

HTML コード例

<section>
  <p>サンプルテキストです。<br>1行目のみスタイルを当てたいときは擬似要素「::first-line」を使い、1文字目のみにスタイルを当てたいときは「::first-letter」を使います。</p>
</section>

今回はp要素を使っていますが、h1要素などの見出しやリストなどブロックレベル要素で使用できます。

なお、使用できるCSSプロパティには制限があります。
詳しくは次のページの「利用可能なプロパティ」欄を参照してください。
::first-line - MDN web docs

テキストの先頭1文字目を指す「::first-letter」

先頭の1文字だけにCSSを適用したい時は、擬似要素「::first-letter」を使います。

CSS コード例

p {
  color: #333;
  line-height: 1.6em;
}
p::first-letter {
  color: #ff2458;
  font-size: 129%;
  font-weight: bold;
}

HTML コード例

<section>
  <p>サンプルテキストです。<br>1行目のみスタイルを当てたいときは擬似要素「::first-line」を使い、1文字目のみにスタイルを当てたいときは「::first-letter」を使います。</p>
</section>

こちらも「::first-line」同様にブロックレベル要素で使用できます。