CSS Pseudo-elements
پیشعنصرهای CSS چیستند؟
پیشعنصرهای CSS به شما اجازه میدهند بخش خاصی از یک عنصر را استایل بدهید یا محتوایی را به صفحه اضافه کنید بدون اینکه نیاز باشد در HTML تغییری ایجاد کنید. آنها با دو دونقطه `::` نوشته میشوند (اگرچه بعضی مرورگرهای قدیمی یک دونقطه `:` را هم قبول دارند).
—
🔹 پیشعنصرهای معمول CSS
| پیشعنصر | توضیح |
| —————- | ————————————————————- |
| `::before` | محتوایی را **قبل** از محتوای یک عنصر اضافه میکند |
| `::after` | محتوایی را **بعد** از محتوای یک عنصر اضافه میکند |
| `::first-line` | فقط اولین خط متن در یک بلوک را استایل میدهد |
| `::first-letter` | فقط اولین حرف متن در یک بلوک را استایل میدهد |
| `::selection` | قسمت انتخابشده متن توسط کاربر را استایل میدهد |
| `::placeholder` | متن پیشنمایش داخل `<input>` یا `<textarea>` را استایل میدهد |
| `::marker` | علامتهای بولت یا شماره در لیستها را استایل میدهد|
| `::backdrop` | پسزمینهی عناصر مدالی مثل `<dialog>` را استایل میدهد|
—
🔸 مثال: استفاده از `::before` و `::after`
“`css
p::before {
content: “👉 “;
color: red;
}
p::after {
content: ” 👈”;
color: blue;
}
“`
**کد HTML:**
“`html
<p>این یک پاراگراف است.</p>
“`
نتیجه:
👉 این یک پاراگراف است. 👈
—
🔸 مثال: `::first-letter` و `::first-line`
“`css
p::first-letter {
font-size: 200%;
color: darkgreen;
}
p::first-line {
font-weight: bold;
}
“`
—
🔸 مثال: `::selection`
“`css
::selection {
background: yellow;
color: black;
}
“`
—
⚠️ نکات مهم
* نمیتوانید به پیشعنصرها مستقیماً تعاملات مثل هاور بدهید.
* پیشعنصرهای `::before` و `::after` فقط زمانی نمایش داده میشوند که خاصیت `content` داشته باشند.
* استفاده از پیشعنصرها همراه با HTML معنایی (Semantic) برای حفظ دسترسی (Accessibility) بهتر است.
دیدگاهتان را بنویسید