شبه عنصر ها در CSS
570 روز پیش
پويا صادقى , آموزش CSS
شبه عنصر ها ( pseudo-elements ) برای اضافه کردن استایل به بعضی بخش ها استفاده میشن.
این ویژگی در CSS2 معرفی شد.
روش استفاده از شبه عنصر ها برای عنصر ها به این صورته:
selector:pseudo-element {property:value;}
یا برای کلاس ها:
selector.class:pseudo-element {property:value;}
مثال ها:
:first-line
با :first-line میتونیم یک استایل رو به خط اول یک متن نسبت بدیم:
p:first-line {color:#ff0000;}
تو مثال بالا به خط اول پاراگراف رنگ قرمز نسبت دادیم 
البته first-line فقط از ویژگی های زیر پشتیبانی میکنه:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter
با :first-letter میتونیم استایل رو به حرف اول نسبت بدیم:
p:first-letter {color:#ff0000;}
تو مثال بالا حرف اول پاراگراف رنگش قرمز میشه
و first-letter هم از این ویژگی ها پشتیبانی میکنه:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align only if => float:none
- text-transform
- line-height
- float
- clear
در مثال زیر حرف اول پاراگراف سایز 40 پیکسل و خط اول رنگ قرمز خواهد داشت:
p:first-letter{font-size:40px;}p:first-line{color:#ff0000;}
:before
با این تگ میتونیم محتوایی رو به قبل از تگ مورد نظر اضافه کنیم. در مثال زیر یک تصویر رو قبل از تگ h1 قرارمیدیم:
h1:before{content:url(icon.gif);}
:after
و با :after عکسی رو به بعد از تگ h1 اضافه میکنیم:
h1:after{content:url(icon.gif);}
یا مثلا یه متن رو بعد از h1 اضافه میکنیم:
h1:after{content:"this text will be after my H1";}
