CSS擬似要素のbefore・afterとは
CSSの『:before』『:after』を使えばHTML上に存在しない擬似要素を追加（表示）する事ができるので、これまで装飾の為に使ってた空のdiv要素やspan要素でHTMLのソースコードを煩雑にしなくて済むメリットがある
またデメリットとしてはHTML上に存在しない擬似要素なのでjQueryなどJavaScriptを使った操作ができない
あくまでも擬似要素なのでキーワードを入れてもSEO的な効果はない
『:before』だけ『:after』だけでも使用可能で『url();』を使えば画像を擬似要素として配置する事も可能
:beforeと:afterのcontent:attr(data-text);を使うことで、jqueryのtext()のようにテキストを取得し尚且つ表示が可能:before :afterの設定方法
:before :afterの打ち消し方法
.box:before,
.box:after{
content:none;
}
:before :afterを使ってテキストを取得・表示する方法
この記事へのコメント