CSS擬似要素のbefore・afterとは

CSSの『:before』『:after』を使えばHTML上に存在しない擬似要素を追加(表示)する事ができるので、これまで装飾の為に使ってた空のdiv要素やspan要素でHTMLのソースコードを煩雑にしなくて済むメリットがある

またデメリットとしてはHTML上に存在しない擬似要素なのでjQueryなどJavaScriptを使った操作ができない

あくまでも擬似要素なのでキーワードを入れてもSEO的な効果はない

『:before』だけ『:after』だけでも使用可能で『url();』を使えば画像を擬似要素として配置する事も可能

:before :afterの設定方法


:before :afterの打ち消し方法

.box:before,
.box:after{
	content:none;
}

:before :afterを使ってテキストを取得・表示する方法

:beforeと:afterのcontent:attr(data-text);を使うことで、jqueryのtext()のようにテキストを取得し尚且つ表示が可能


この記事が気に入ったら
いいね ! お願いします(><;)

投稿者:和禅雅

この記事へのコメント