文字の前後にcssで文字追加

“サンプル”
という言葉の前後に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 );}

サンプル

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です