سلام
هر کاری که می کنم این استایل ها اعمال نمیشن
لطفا این کد رو تست کنید
<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;
}
کش رو هم پاک کردم
سلام وقتتون بخیر
شبه عناصر (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;
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟