CSS疑似要素で文字や画像を挿入「before」と「after」

CSS疑似要素のbeforeとafterで画像や文字を挿入する

SEOに関係ない文字や画像の挿入、PCサイトをスマホ対応させるときにhtmlを変更したくない時に。

beforeとafterで出来ること

1. 指定した場所の前後に文字・画像を挿入できる。
2. 挿入した文字を装飾！
3. iconなど、見やすくするための画像挿入。
4. id、class、pなど、ほとんどのhtmlタグに使用できる。

beforeとafterで出来ないこと

1. 文字として認識されないのでSEOに必要な文字には、使用してはいけない。
2. 出現させた文字や画像にリンクを張ることが出来ない。
3. 画像の大きさを変更できない。

css疑似要素beforeとafter-参考サイト1

css疑似要素beforeとafterの基本の使い方をマスターできるWebサイト

yossense.com