Pseudo-Element در CSS
pseudo-element در CSS برای استایل‌دهی بخش‌های خاصی از المان به کار می‌رود.
برای مثال، میتوان از آن برای:
- استایل‌دهی اولین حرف یا خط المان استفاده کرد.
- وارد کردن محتوا قبل، و یا بعد محتوای خود المان استفاده کرد.
ساختار Pseudo-Element در CSS
ساختار pseudo-element به شکل زیر است:
selector::pseudo-element {
property: value;
}ویژگی first-line::
ویژگی first-line:: امکان استایل‌دهی اولین خط متن را به ما می‌دهد.
مثال زیر اولین خط تمام المانهای <p> را استایل‌دهی می‌کند:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
نکته: ویژگی first-line:: فقط برای المانهای block-level استفاده می‌شود.
مقادیر زیر را میتوان برای این ویژگی به کار برد:
| مقادیر | توضیحات |
|---|---|
| font properties | مقادیر مربوط به فونت |
| color properties | مقادیر مربوط به رنگ متن |
| background properties | مقادیر مربوط به پس‌زمینه |
| word-spacing | فاصله بین کلمات |
| letter-spacing | فاصله بین حروف |
| text-decoration | ظاهرسازی متن |
| vertical-align | چینش عمودی متن |
| text-transform | بزرگی و کوچکی حروف لاتین |
| line-height | ارتفاع خط |
| clear | پاک شدن اثر شناور بودن المان قبلی |
ویژگی first-letter::
ویژگی first-letter:: امکان استایل‌دهی اولین حرف متن را به ما می‌دهد.
مثال زیر اولین حرف تمام المانهای <p> را استایل‌دهی می‌کند:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
نکته: ویژگی first-letter:: فقط برای المانهای block-level استفاده می‌شود.
مقادیر زیر را میتوان برای این ویژگی به کار برد:
| مقادیر | توضیحات |
|---|---|
| font properties | مقادیر مربوط به فونت |
| color properties | مقادیر مربوط به رنگ متن |
| background properties | مقادیر مربوط به پس‌زمینه |
| margin properties | مقادیر مربوط به لبه(margin) |
| padding properties | مقادیر مربوط به لبه داخلی(padding) |
| border properties | مقادیر مربوط به حاشیه(border) |
| text-decoration | ظاهرسازی متن |
| (only if "float" is "none") vertical-align | چینش عمودی متن (تنها اگر ویژگی "float" بر روی "none" باشد) |
| text-transform | بزرگی و کوچکی حروف لاتین |
| line-height | ارتفاع خط |
| float | ویژگی float |
| clear | پاک شدن اثر شناور بودن المان قبلی |
Pseudo-element و کلاس‌های HTML
Pseudo-element می‌تواند با کلاس‌های HTML ترکیب شود:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}ترکیب ویژگی Pseudo-element
چندین ویژگی Pseudo-element می‌توانند با یکدیگر ترکیب شوند.
در مثال زیر اولین حرف پاراگراف قرمز و با سایز large نمایش خواهد شد. بقیه خط با رنگ آبی و حروف کوچک نمایش داده می‌شود، ادامۀ پاراگراف هم سایز و رنگ پیش‌فرض را نمایش می‌دهد:
p::first-letter {
color: #ff0000;
font-size: large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}ویژگی before::
ویژگی before:: برای اضافه کردن محتوایی قبل از محتوای المان به کار می‌رود.
مثال زیر یک عکس قبل از شروع محتوای تمام المانهای <h1> قرار می‌دهد:
h1::before {
content: url(smiley.gif);
}ویژگی after::
ویژگی after:: برای اضافه کردن محتوایی بعد از محتوای المان به کار می‌رود.
مثال زیر یک عکس بعد از شروع محتوای تمام المانهای <h1> قرار می‌دهد:
h1::after{
content: url(smiley.gif);
}ویژگی marker::
ویژگی marker:: علامت پشت محتوای لیست را استایل‌دهی می‌کند.
به مثال زیر توجه کنید:
::marker {
color: red;
font-size: 23px;
}ویژگی selection::
ویژگی selection:: المان انتخاب شده توسط کاربر را استایل‌دهی می‌کند.
این ویژگی مقادیر زیر را می‌گیرد:
- color
- background
- cursor
- outline
مثال زیر رنگ متن انتخاب شده را قرمز با پس‌زمینه زرد قرار می‌دهد:
::selection {
color: red;
background: yellow;
}
احسان اسلامی
