【CSS】擬似要素before/afterの使い方

【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;
}
「キッチンノート.fun」という料理サイトを立ち上げました!このサイトで紹介していた料理記事は、そちらへ移動しました。
記事に関するご質問などがあれば、
Twitter または お問い合わせ までご連絡ください。
オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。

ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説しています。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

関連記事