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