cssの擬似要素before,afterについて

ここ最近までcssの擬似要素のhoverやvisitedは使っていたのですが、beforeとafterは今まで使う機会がなく使い方がよくわかっていない状態でした。

擬似要素before,afterとは

擬似要素のbefore,afterを使うことで要素の前後に文字や画像を追加することができる。beforeを使用すると要素の前に、afterの使用により要素の後に追加される。

コンテンツ表示方法

擬似要素のbefore,afterを使用してコンテンツを表示させるには以下が必須

クラス名::before {

position: absolute;
content: "";
display: block;

}

上記を記述することでコンテンツ表示ができることが、わかってきてだいぶ慣れてきたように感じています。

content: "";となっていますがこれは画像を表示する場合です。テキスト表示の場合はここに記述します。

わかることが少しずつ増えてきた

まだ知らないことはたくさんあるけどいつの間にかできるようになってるなっていうのが少しずつ増えている気がしてとても嬉しい。これからも学んだことは投稿していこうと思います。