【CSS】擬似要素で左右に画像を表示させる方法

今回は、「CSSの擬似要素で左右に画像を表示させる方法」について紹介します。

パターンは3つあります。

①擬似要素で表示させる方法

②positionを使って表示させる方法

③backgroundで表示させる方法

擬似要素を使ってテキストの左右に画像を表示させる実装はよく使うので、分からない人は是非マスターしていきましょう!

①擬似要素で表示させる方法

HTML

CSS

テキストの左右に画像を表示させるために、beforeとafterのどちらともにcontentで画像を指定しました。

そして、「vertical-align: middle;」で上下中央寄せに。

paddingで画像の周りに余白を入れましたが、こちらはご自由に指定してみてください。

②positionを使って表示させる方法

HTML

CSS

text2に対して「position: relative;」を指定し、contentを使って擬似要素beforeとafterで画像を表示します。

beforeとafterそれぞれに「position: absolute;」を指定し、あとはtopやleftの値を自由に配置を指定したらOKです。

③backgroundで表示させる方法

HTML

CSS

backgroundで画像を表示させるには、contentに対して空の指定をして、それからbackgroundで画像を指定したらOKです。

あとは画像の幅や高さ、配置や余白を決めたら完了です。

まとめ

以上が、「CSSの擬似要素で左右に画像を表示させる方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事