شبه عنصر (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