لماذا لا يعمل الafter مع العنصر img

اعتقد ان سبب المشكلة هو انك تحاول إضافة after إلى العنصر من النوع img.

وهذا غير صحيح في CSS.

لحل المشكلة جرب الكود التالي :

<div class="col">
  <div class="imageContainer">
    <img src="../images/a.jpg" alt="">
  </div>
</div>

وفي css :

.imageContainer {
      width: 260px;
      position: relative;
      text-align: center;
}
.imageContainer img {
      width: 100%;
}

.imageContainer::after {
      content: "";
      display: block;
      width: 80px;
      height: 100%;
      background-color: var(--scolor);
      top: 0;
      right: 0;
      position: absolute;
}

حيث اضفنا حاوية جديدة تحتوي على الصورة و الـ after.

السلام عليكم ورحمة الله وبركاته،

الاجابة بإختصار لا يمكن إضافة after و before للعناصر الفارغة.

العناصر الفارغة Empty Elements هي العناصر التي لا تضم محتوى، إنما تكون وسم Tag يحتوي على بعض الـ Attributes فقط. مثال على ذلك عنصر <img> و <input>، بينما العناصر غير الفارغة تحتوي على opening tag و content و closing tag مثل اغلب العناصر.