CSS擬似要素のcontentで画像を表示する方法を解説！

2025年11月8日

ハシビィくん

画像素材を使ってWebサイトを装飾したいっす！背景画像ではなく、画像を自由に動かして使いたいっす。

カピーさん

背景画像とは違うんだな。それなら擬似要素を使ってみるのがベストだな。活用する頻度も高いからぜひ覚えておくといいぞ！

テキストにアイコンを付けたい／リスト項目の先頭に画像を入れたい…といった場面で、HTML に <img> を都度書き込むのは手間です。
そこで、CSS の擬似要素 ::before や ::after を使って、 CSS 側だけで画像を挿入する方法 が便利です。
今回は、以下の流れで解説します：

擬似要素の content に画像を指定する基本手法
その画像サイズ・位置を調整するためのテクニック
background を使った別アプローチ
レスポンシブ対応のポイント

擬似要素の `content` で画像を指定する方法

擬似要素 ::before・::after は、通常「前／後ろにテキストを入れる」「ボックスを追加する」などに用いられます。
しかし実は、content: url(…) を使って 画像を挿入することも可能 です。

こちらの画像は擬似要素を使って、ページの右上に装飾目的の画像を差し込んだ形になります。

通常であれば、カラムなどを使って要素の割合を駆使して表現しようと思うかもしれませんが、カラムを使用した場合は画面割合の幅に左右されてしまうので、コントロールがしにくい場面があるので、それらを解消するための方法になります。

p::before {
  content: url(./heart.png);
  vertical-align: middle;
  padding-right: 5px;
}

この例では、すべての <p> 要素の前に heart.png アイコンを挿入しています。文章との垂直位置や余白（vertical-align/padding-right）も調整しています。

`content` で指定した画像のサイズを変更するには？

上記の方法で画像を挿入できても、サイズが大きすぎたり小さすぎたりという問題が出ることがあります。
しかし、content で挿入された画像に対して width/height を指定しても、期待どおりに効かないことがあります。

解決策：`transform: scale()` を使う

画像の大きさを調整したいときは、擬似要素に display: inline-block 等を指定して、transform: scale() で縮小・拡大する方法があります。

p::before {
  content: url(./heart.png);
  display: inline-block;
  vertical-align: middle;
  transform: scale(0.1);
}

位置・余白の調整

ただし、画像自体が縮小されても “元の領域” が残って余白ができることがあります。
そのため、必要に応じて position: absolute を使って位置をずらしたり、親要素に position: relative を設定しておくことが推奨されています。

p {
  position: relative;
  padding-left: 50px;
}
p::before {
  content: url(./heart.png);
  transform: scale(0.1);
  position: absolute;
  top: -105px;
  left: -100px;
}

`background` を使った画像表示の方法

「画像サイズを自由に調整したい」「ボックスの中にアイコンを入れて配置したい」という場合は、擬似要素を ‘空のボックス’ として使い、背景画像として設定する方がシンプルで堅実です。

p::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(./heart.png) no-repeat;
  background-size: contain;
  margin-right: 8px;
}

このように、content: "" で実質ボックスだけを生成し、background に画像を指定。width／height でサイズを制御できるため、レイアウトが安定しやすいです。

いつ使うべきか？

単にテキスト横に小さなアイコンを付けるだけなら、content: url() の手軽な方法でも十分。
ただし、 複雑なレイアウト や 画像サイズ／位置調整が多く必要な場面 では、background パターンの方が管理しやすいと覚えておきましょう。

疑似要素を使うメリット

afterやbeforeがものすごく便利なのは「HTMLコードを汚すことなく様々な表現ができる」ということです。なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。そのため、SEOを気にせずにユーザーのための自由な表現ができるのです。

装飾の追加・削除がCSSだけで完結するのも強みです。たとえば「見出しの前にアイコンを付けたい」「リンクに矢印を足したい」など、HTMLを触らずに済む。→ デザイン変更時のメンテナンスが楽になります。

スクリーンリーダーなどに読み上げられない（非表示）のも装飾目的なら魅力です。
content で追加された文字や画像は、通常アクセシビリティツールには認識されません。
→ 装飾目的ならそれでOKですが、意味のある情報（本文の一部）を擬似要素で出すのはNGです。

レスポンシブ対応（画面幅に応じて調整）

スマホ・タブレット・PCといった複数画面で閲覧される今、擬似要素で表示した画像もレスポンシブに対応させるのが望ましいです。

p {
  font-size: 16px;
}
p::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(./heart.png) no-repeat;
  background-size: contain;
  margin-right: 3px;
}
@media screen and (min-width: 480px) {
  p {
    font-size: 28px;
  }
  p::before {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}

ここでは、画面幅が 480px 以上（タブレット/PC）ではアイコンサイズや余白を大きく設定しています。

さらに、アイコンサイズを「文字サイズに応じて変化させたい」なら px ではなく em 単位を使うと便利です。

p { font-size: 16px; }
p::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background: url(./heart.png) no-repeat;
  background-size: contain;
  margin-right: 0.2em;
}
@media screen and (min-width: 480px) {
  p { font-size: 28px; }
}

この場合、画面幅が変わると文字サイズが変わり、それに応じてアイコンサイズも比例して変わる設計ができます。