شبه عنصر (Pseudo-Elements) در CSS
شبه عنصر چیست؟
یک شبه عنصر (Pseudo-Elements) در CSS برای نامیدن بخش مشخصی از یک عنصر استفاده می شود. برای مثال در طراحی سایت از یک شبه عنصر برای استایل اولین کلمه و یا خط یک عنصر استفاده می شود. محتوا را قبل و یا بعد از محتوای عنصر اضافه کنید.
ترکیب (Syntax)
نحوه ترکیب شبه عناصر:
selector::pseudo-element {
property:value;
}
شبه عنصر ::first-line
این شبه عنصر برای اضافه کردن یک سبک مشخص به اولین خط متن استفاده می شود. توجه داشته باشید که این ویژگی فقط بر روی عناصر block-level اعمال می شود. در مثال زیر، اولین خط متن در تمام عناصر <p> را قالب بندی می کند.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
ویژگی های زیر می توانند به شبه عنصر first-line:: اعمال شوند:
• ویژگی های فونت (font)
• ویژگی های رنگ (color)
• ویژگی های پس زمینه (background)
• ویژگی word-spacing
• خاصیت letter-spacing
• ویژگی text-decoration
• ویژگی vertical-align
• ویژگی text-transform
• ویژگی line-height
• ویژگی clear
شبه عنصر ::first-letter
مشابه شبه عنصر first-line:: است با این تفاوت که یک سبک مشخص را برای اولین حرف متن تعیین می کند. این شبه عنصر در طراحی سایت می تواند خواص و ویژگی های زیر را در بر بگیرد:
• ویژگی font
• خاصیت color
• صفت background
• ویژگی margin
• ویژگی padding
• ویژگی border
• خواص text-decoration
• ویژگی vertical-align (تنها در صورتی که مقدار “float” برابر با “none” باشد)
• ویژگی text-transform
• ویژگی line-height
• خاصیت float
• صفت clear
منبع: sitedesign-co.com
