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

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

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

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

HTML

<p class="text1">①擬似要素で左右に画像を表示</p>

CSS

// 擬似要素で表示
.text1::before {
    content: url(../image/images/illustrator-templates_Practice_03.png);
    vertical-align: middle;
    padding-right: 10px;
}
.text1::after {
    content: url(../image/images/illustrator-templates_Practice_03.png);
    vertical-align: middle;
    padding-left: 10px;
}

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

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

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

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

HTML

<p class="text2">②positionで左右に画像を表示</p>

CSS

// positionを使って画像を表示
.text2 {
    position: relative;
}
.text2::before {
    content: url(../image/images/illustrator-templates_Practice_03.png);
    position: absolute;
    top: -39px;
    left: -110px;
}
.text2::after {
    content: url(../image/images/illustrator-templates_Practice_03.png);
    position: absolute;
    top: -39px;
    padding-left: 10px;
}

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

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

③backgroundで表示させる方法

HTML

<p class="text3">③backgroundで左右に画像を表示</p>

CSS

// 背景画像で表示
.text3::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background: url(../image/images/illustrator-templates_Practice_03.png) no-repeat;
    background-size: contain;
    margin-right: 10px;
}
.text3::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background: url(../image/images/illustrator-templates_Practice_03.png) no-repeat;
    background-size: contain;
    margin-left: 10px;
}

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

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

まとめ

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