見出しの前(または後)に画像を付ける

beforeとafterを活用

HTML

<h1>見出しの内容</h1>

CSS

h1:before{
content:url('画像のパス');
position:relative;
right:10px;/*本来の位置より左に10pxずらす*/
}

h1:after{
content:url('画像のパス');
left:10px;/*本来の位置より右に10pxずらす*/
}

位置はposition:relativeで調整
position:relativeのrightはつまり右に指定した分の余白を作る→左にずらすということ

大きさもcssで指定したいときは背景画像のほうがいいかもしれないけど
前と後ろ両方を同じ画像で飾るとかならcontentのほうが位置を調整しやすい

コメント