پارسا سجادی
2 سال پیش توسط پارسا سجادی مطرح شد
1 پاسخ

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;
}

کش رو هم پاک کردم


ثبت پرسش جدید
نجما
@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;
        }

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام