更新日
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で再現することが難しいと思われていたような装飾も再現することができるようになります。
![例_見出しの上にテキスト追加](https://webliker.info/wp-content/uploads/2022/11/例_見出しの上にテキスト追加.png)
![](https://webliker.info/wp-content/uploads/2022/11/例_リストのアイコン-1.png)
![例_背景色のついたレイヤーを敷く](https://webliker.info/wp-content/uploads/2022/11/例_背景色のついたレイヤーを敷く.png)
![例_吹き出しの三角形](https://webliker.info/wp-content/uploads/2022/11/例_吹き出しの三角形.png)