“サンプル”
という言葉の前後にcssで文字を入れる
classをafterbeforeとして
サンプル
文字の後に“です。”を入れる
1 | .afterbefore p:after{padding-left:2px;content:"です。";} |
サンプル
言葉の前に“これは”と入れてみる
1 | .afterbefore2 p:before{padding-right:2px;content:"これは";} |
サンプル
※afterbefore2にしたのはafterbeforeを反映させないため
前後に文字を入れてみる
1 2 | .afterbefore3 p:before{padding-right:2px;content:"これは";}.afterbefore3 p:after{padding-left:2px;content:"です。";} |
サンプル
文字の色と大きさを変えてみる
1 | .afterbefore4 p:after{padding-left:2px;color:#ff0000;font-size:24px;content:"です。";} |
サンプル
画像も入れてみる
1 | .afterbefore5 p:after{content:url( 画像のurl );} |
サンプル