擬似要素

CSSの擬似要素とは、HTMLの要素を擬似的に作り出し、それにスタイルを当てる仕組みです。記述には、擬似クラスと区別するためにコロン(:)を2つ付けます。

例
p::before {
  content: "sample";
}

この例ではp要素の直前に「::before」擬似要素で、文字列「sample」を追加しています。

要素の直後にcontentを追加したい場合は、「::after」を使います。

例
p::after {
  content: "sample";
}

「::first-letter」は、ブロック要素内のテキストの最初の1文字にスタイルを指定できます。

例
p::first-letter {
  color: red;
}

なお、インクライン要素には適用できません。

参考記事

【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! | ビジネスとIT活用に役立つ情報
前回の記事【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して...
:before擬似要素-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
:after擬似要素-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
:first-letter擬似要素-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表

コメント

  1. […] 擬似要素CSSの擬似要素とは、HTMLの要素を擬似的に作り出し、それにスタイルを当てる仕組みです。記述には、擬似クラスと区別するためにコロン(:)を2つ付けます。例p::before { content: &quot […]

タイトルとURLをコピーしました