CSSの擬似要素before・afterの使い方

この記事では、CSSの擬似要素の使い方を解説していく。 擬似要素はたくさん定義されているが、よく使うであろう次の4つに絞って順番に解説する。

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

こちらのHTMLを使って擬似要素を適応させていく。

<p>
私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。
</p>

擬似要素「::before」の使い方

::beforeを適応したデザイン
::beforeを適応したデザイン

::beforeは、要素の最初に子要素として擬似要素を追加する。contentプロパティを使って擬似要素の内容を追加できる。

p::before {
  content: "選択した要素の前に追加";
  color: #FF5353;
}

擬似要素「::after」の使い方

::afterを適応したデザイン
::afterを適応したデザイン

::afterは、要素の最後に子要素として擬似要素を追加する。contentプロパティを使って擬似要素の内容を追加できる。

p::after {
  content: "選択した要素の後ろに追加";
  color: #FF5353;
}

擬似要素「::first-letter」の使い方

::first-letterを適応したデザイン
::first-letterを適応したデザイン

::first-letterは、最初の行の最初の文字にスタイルを適応する擬似要素である。

p::first-letter {
  color: #FF5353;
}

擬似要素「::first-line」の使い方

::first-lineを適応したデザイン
::first-lineを適応したデザイン

::first-lineは、ブロックレベル要素の最初の行にスタイルを適用する擬似要素である。

p::first-line {
  color: #FF5353;
}

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazonRakuten
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazonRakuten
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazonRakuten

Amazonでお得に購入するなら、Amazonギフト券がオススメ!

\Amazonギフトがお得/

コンビニ・ATM・ネットバンキングで¥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます!
Amazonギフト券

\この記事をシェアする/