جشنواره بهارانه راکت! ۳۵% تخفیف ویژه بر روی دوره‌های آموزشی
مشاهده دوره‌ها
ثانیه
دقیقه
ساعت
روز
پارسا سجادی
2 سال پیش
توسط پارسا سجادی
مطرح شد
after در css
سلام
هر کاری که می کنم این استایل ها اعمال نمیشن
لطفا این کد رو تست کنید
<img class="img" src="https://static.roocket.ir/images/avatar/2021/12/26/hbbq0n0C3MoSFzMhImXIjIJSXpM8XpBjjZLAks3H.png" alt="test">با css زیر
.img::after{
content: '';
width: 40px;
z-index: 100000;
height: 400px;
border-radius: 10px;
background-color: #f00;
display: block;
}کش رو هم پاک کردم
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
نجما
@n.bahreman157
2 سال پیش
آپدیت شد
گزارش تخلف
کپی کردن
2
سلام وقتتون بخیر
شبه عناصر (Pseudo-elements) را فقط می توانیم روی تگ هایی به کار ببریم که می توانند حاوی عناصر دیگری باشند، به عنوان مثال: <p> یا <span> یا <h1> و غیره.
از اونجا که <img> یک تگ خالی خودبسته است (self-closing) که نمیشه عنصر دیگری را در خود داشته باشد، شبه عناصر مانند :after یا :before را نمیشه براش استفاده کرد.
برای انجام این کار شما میتونین از جاوااسکریپت/جی کوئری استفاده بکنید
$(function() {
$('.img').after('<img src="..." />');
});یا تگ img اتون رو داخل یک تگ والد بذارین و به اون after بدین
<div class="container">
<img class="img"
src="https://static.roocket.ir/images/avatar/2021/12/26/hbbq0n0C3MoSFzMhImXIjIJSXpM8XpBjjZLAks3H.png"
alt="test" />
</div>.container::after {
content: '';
width: 40px;
z-index: 100000;
height: 400px;
border-radius: 10px;
background-color: #f00;
display: block;
}