HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

文字の前後に装飾画像

文字の前後に装飾画像いれるの知らなかった。 orz
わざわざ pdding つかったりしてたよ。。。 例えば、文字の前に星を付けてみよう。

←星ついたよね??

 
 
これは、こうやってる。
<h3 class="breforStar">←星ついたよね??</h3>

<style type="text/css">
.breforStar:before {content: url('http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2014/11/star01_a.png'); margin-right: 5px;}
</style>
つまり、疑似属性 before ってやつだな。 疑似属性は、:before とかでつけてあげる。
 
ただやっぱり、テキストの位置調性は微妙だ。ドンピシャにもってくるには・・・

←星ついたよね??

<h3 class="breforStardonpi">←星ついたよね??</h3>
<style type="text/css">
.breforStardonpi{
background-image:url('http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2014/11/star01_a.png');
background-repeat:no-repeat;
padding:10px 0 0px 32px;
height:25px;
}
</style>

スポンサーリンク

スポンサーリンク

カテゴリー