疑似要素を指定の位置に配置したい

Question

前提・実現したいこと

アイコン画像の左上に疑似要素を利用して文字を実装させたい。

発生している問題・エラーメッセージ

疑似要素が出現しない。

該当のソースコード

--HTML--
<div class="foods">
      <img class="foods__img" src="img/ハンバーガーアイコン4.png" alt="FOOD" />
      <img
        class="foods__img"
        src="img/コーヒーカップのフリーアイコン.png"
        alt="DRINK"
      />
      <img
        class="foods__img"
        src="img/ティラミスケーキアイコン1.png"
        alt="DESERT"
      />
      <img
        class="foods__img"
        src="img/テイクアウトのコーヒーのアイコン2.png"
        alt="TAKE OUT"
      />
    </div>
--/HTML--

--css--
.foods {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin: 200px 0;
}
.foods.hidden {
  display: none;
}
.foods__img {
  position: relative;
  width: 200px;
  height: 100%;
  cursor: pointer;

  transition: 0.3s;
}
.foods__img::before {
  content: 'food';
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  color: #fff;
  padding: 24px;
}
.foods__img:hover {
  transform: scale(1.2);
}
--/css--

試したこと

疑似要素にてcontentで文字指定positionによる配置の指定。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

::before 及び ::after によって作成される疑似要素は要素の整形ボックスに含まれるため、 <img> 要素や <br> 要素のような置換要素には適用されません。

::after (:after) - CSS: カスケーディングスタイルシート | MDN

Comments

[nao__funky]

ご返答ありがとうございます。
勉強になりました。早期に気付けて幸いです。
勉強不足でした。

[Lhankor_Mhy]

お役に立てたようで何よりです