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

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

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

Free-Learn

شبه عنصر before در CSS

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

با استفاده از ویژگی content میتوان یک محتوا را به بعد ( after ) و یا قبل ( before ) یک عنصر قرار داد.

نسخه CSS2

Free-Learn

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

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

مثال شماره ۱ : قرار دادن تصویر در قبل و بعد از یک عنصر

امتحان کنید

مثال شماره ۲ : ایجاد شماره سطر، بصورت خودکار قبل از سطرهای یک جدول

امتحان کنید

مثال شماره ۳ : ایجاد شماره آیتم، بصورت خودکار قبل از آیتم های یک لیست نامرتب

امتحان کنید

Free-Learn

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

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

* مرورگر اینترنت اکسپلورر نسخه ۸ و اُپرا نسخه ۴ تا ۶ از تک کالون ( : ) پشتیبانی میکند ولی در نسخه های جدیدتر از ( :: ) پشتیبانی و مشکلی ندارد.

+ برای استفاده و عمل کردن این شبه عنصر در مرورگر اینترنت اکسپلورر نسخه ۸ باید حتما DOCTYPE صفحه را تعریف کرده باشید.

نام انتخابگر Chrome Firefox Opera Safari IE
before:: ۴٫۰ ۳٫۵ ۷٫۰ * ۳٫۱ ۹٫۰ *

Free-Learn

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

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

Free-Learn

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

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

Free-Learn

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