07｜beforeとafterの擬似要素を使ってCSSの再現の幅を広げよう

beforeとafterとは？

beforeとafterは擬似要素といってHTMLのタグとして書かずCSSのセレクタで擬似的に追加する特別な要素です。

以下のシンプルなpに対して擬似要素を入れてみると…

<p>擬似要素を入れてみよう</p>

すると、HTMLには何も追加していないのに関わらず、CSSのセレクタからテキストを追加することができました。

p::before{
  content : "これはビフォー";
}

p::after{
  content : "これはアフター";
}

どんなことができるようになる？

beforeとafterで擬似要素をコントロールできるようになれば、装飾だけのためのHTMLのタグを追加が不要になったり、CSSで再現することが難しいと思われていたような装飾も再現することができるようになります。

beforeとafterの書き方

パスワードが必要です

これより先は有料コンテンツです。「ギャクサン」の購入ページから契約をしてください。
すでに契約済みの方でパスワードの入力が上手くいかない場合はサポートへ連絡してください。

送信する