普通にbeforeとafterだと文字の終わりになるので、
改行しても真ん中にいてほしかったので
|
1 2 3 |
<div class="h3-ttl-all"> <h3>サイドにアイコンつけたくて・・・夏</h3> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/*h3設定*/ .h3-ttl-all { display: block; } .h3-ttl-all h3 { display: inline-block; font-size: 140%; line-height: normal; position: relative; width: 70%; letter-spacing: -0.1em; } .h3-ttl-all h3::before { float: left; position: absolute; left: -25%; top: 25%; content: '';/*何も入れない*/ display: inline-block;/*忘れずに！*/ width: 50px;/*画像の幅*/ height: 50px;/*画像の高さ*/ background-image: url(images/h3_subttl_icon.png); background-size: contain; vertical-align: middle; background-repeat: no-repeat; } .h3-ttl-all h3::after { float: right; right: -25%; top: 25%; position: absolute; content: '';/*何も入れない*/ display: inline-block;/*忘れずに！*/ width: 50px;/*画像の幅*/ height: 50px;/*画像の高さ*/ background-image: url(images/h3_subttl_icon.png); background-size: contain; vertical-align: middle; background-repeat: no-repeat; } /*h3設定*/ |