این آموزش در تاریخ ۱۴۰۰/۱۱/۰۶ آپدیت شده است.
آموزش شبه عنصر after در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه عنصر after در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه عنصر after در CSS
با استفاده از شبه عنصر ( یا هم انتخابگر ) after در CSS میتوان به بعد ( یعنی بعد از محتوای خوده تگ ) استایل دلخواه تعریف کرد.
- شبه عنصر after : بعد از محتوای تگ
- شبه عنصر before : قبل از محتوای تگ
| نسخه | CSS2 |
|---|
Free-Learn
مثال از شبه عنصر after در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه عنصر را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : نمایش آدرس URL لینک ، وقتی ماوس بروی لینک قرار میگیره ( با استفاده از ویژگی content میتونیم اون محتوایی که میخوایم به بعد یا قبل از تگ اضافه شه، اضافش کنیم )
|
1 2 3 4 5 |
a::after { content: " (" attr(href) ") "; display:none; color:red; } |
مثال شماره ۲ : قرار دادن یک عکس در قبل و بعد از تگ ( استفاده از شبه عنصرafter و before )
|
1 2 3 4 5 6 7 |
h2::after { content:url(files/logo-small.png); } h2::before { content:url(files/logo-small.png); } |
مثال شماره ۳ : ایجاد شمارنده خودکار ( عدد ) به ردیف های یک جدول ( یعنی اگه یه سطر جدید به جدول اضافه کنید خودش خودکار شماره ردیفشو میزنه )
|
1 2 3 4 |
/* ایجاد شمارنده خودکار */ #My-Item::before { content:counter(My-Item); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه عنصر after در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| after:: | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری شبه عنصر after در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه عنصر در CSS بصورت زیر می باشد.
|
1 2 3 |
::after { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- برای قرار دادن محتوا ( متن یا تصویر ) در قبل از یک عنصر نیز میتوان از شبه عنصر before استفاده کرد، و خوده محتوا توسط ویژگی content ایجاد میشود.
- شبه عناصر ۲تا :: دارند ولی شبه کلاس ها ۱ دونه : ، در برخی موارد شبه عناصر با ۱دونه : هم کار میکنه ولی شما سعی کنید همیشه از :: استفاده کنید.
