p:before { content: url(../img/es_logo.png); margin: 10px; position: relative; top: 8px; } p:after { content: url(../img/es_logo.png); margin: 10px; position: relative; top: 8px; } という感じです。簡単! SAMPLEのCSSでは、画像の位置をテキストを合わせる為に、positionを指定して揃えています。 contentプロパティで追加した画像は、”置換インライン要素”なので、positionで調整しないとテキストのベースラインと下端が揃った状態で表示されます。 ↑少し分かりづらいですが、画像の下端とテキストの下端が揃ってますね。 今回のSAMPLEコードの様に、positionを使用すると位置を調整できますが