آموزش شبه عنصر before در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه عنصر before در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه عنصر before در CSS
با استفاده از شبه عنصر ( یا هم انتخابگر ) before در CSS میتوان به قبل ( یعنی قبل از محتوای خوده عنصر ) استایل دلخواه در یک صفحه وب مشخص کرد.
با استفاده از ویژگی content میتوان یک محتوا را به بعد ( after ) و یا قبل ( before ) یک عنصر قرار داد.
| نسخه | CSS2 |
|---|
Free-Learn
مثال از شبه عنصر before در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه عنصر را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قرار دادن تصویر در قبل و بعد از یک عنصر
|
1 2 3 |
h2::before { content:url(img/bg-content.png); } |
مثال شماره ۲ : ایجاد شماره سطر، بصورت خودکار قبل از سطرهای یک جدول
|
1 2 3 4 5 6 7 |
tr:not(#first-row) { counter-increment: My-Item; } #My-Item::before { content:counter(My-Item); } |
مثال شماره ۳ : ایجاد شماره آیتم، بصورت خودکار قبل از آیتم های یک لیست نامرتب
|
1 2 3 4 5 6 7 |
ul li { counter-increment: My-Item; } ul li::before { content:counter(My-Item)") "; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه عنصر before در CSS پشتیبانی میکنند یا خیر.
* مرورگر اینترنت اکسپلورر نسخه ۸ و اُپرا نسخه ۴ تا ۶ از تک کالون ( : ) پشتیبانی میکند ولی در نسخه های جدیدتر از ( :: ) پشتیبانی و مشکلی ندارد.
+ برای استفاده و عمل کردن این شبه عنصر در مرورگر اینترنت اکسپلورر نسخه ۸ باید حتما DOCTYPE صفحه را تعریف کرده باشید.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | IE |
| before:: | ۴٫۰ | ۳٫۵ | ۷٫۰ * | ۳٫۱ | ۹٫۰ * |
Free-Learn
شکل نوشتاری شبه عنصر before در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه عنصر در CSS بصورت زیر می باشد.
|
1 2 3 |
::before { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
برای قرار دادن محتوا ( متن یا تصویر و.. ) در بعد از یک عنصر نیز میتوان از شبه عنصر after استفاده کرد، و خوده محتوا توسط ویژگی content ایجاد میشود.
