این آموزش در تاریخ ۱۴۰۰/۱۱/۰۶ آپدیت شده است.

آموزش شبه عنصر after در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه عنصر after در CSS با من همراه باشید.

آموزش شبه عنصر after در CSS

Free-Learn

شبه عنصر after در CSS

با استفاده از شبه عنصر ( یا هم انتخابگر ) after در CSS میتوان به بعد ( یعنی بعد از محتوای خوده تگ ) استایل دلخواه تعریف کرد.

  • شبه عنصر after : بعد از محتوای تگ
  • شبه عنصر before : قبل از محتوای تگ
نسخه CSS2

Free-Learn

مثال از شبه عنصر after در CSS

در ادامه میتوانید یک مثال از این انتخابگر / شبه عنصر را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : نمایش آدرس URL لینک ، وقتی ماوس بروی لینک قرار میگیره ( با استفاده از ویژگی content میتونیم اون محتوایی که میخوایم به بعد یا قبل از تگ اضافه شه، اضافش کنیم )

امتحان کنید

مثال شماره ۲ : قرار دادن یک عکس در قبل و بعد از تگ ( استفاده از شبه عنصرafter و before )

امتحان کنید

مثال شماره ۳ : ایجاد شمارنده خودکار ( عدد ) به ردیف های یک جدول ( یعنی اگه یه سطر جدید به جدول اضافه کنید خودش خودکار شماره ردیفشو میزنه )

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه عنصر after در CSS پشتیبانی میکنند یا خیر.

نام انتخابگر Chrome Firefox Opera Safari Edge
after:: بله بله بله بله بله

Free-Learn

شکل نوشتاری شبه عنصر after در CSS

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه عنصر در CSS بصورت زیر می باشد.


Free-Learn

نکات و توضیحات

  • برای قرار دادن محتوا ( متن یا تصویر ) در قبل از یک عنصر نیز میتوان از شبه عنصر before استفاده کرد، و خوده محتوا توسط ویژگی content ایجاد میشود.
  • شبه عناصر ۲تا :: دارند ولی شبه کلاس ها ۱ دونه : ، در برخی موارد شبه عناصر با ۱دونه : هم کار میکنه ولی شما سعی کنید همیشه از :: استفاده کنید.

Free-Learn

دریافت PDF یا پرینت این مطلب