Pseudo-element

انتخاب بخش‌های مجازی یک عنصر: Pseudo-element

در درس قبل با Pseudo-class آشنا شدیم که یک حالت یا موقعیت خاص از یک عنصر واقعی رو هدف قرار می‌ده. حالا نوبت مفهومی مشابه ولی کاملاً متفاوته: Pseudo-element، که به‌جای انتخاب یک عنصر موجود، بخشی از عنصر رو، یا حتی یک عنصر کاملاً مجازی و غیرواقعی رو، هدف قرار می‌ده.

Pseudo-element چیست؟

Pseudo-element با دو نقطه‌ویرگول (::) قبل از نامش نوشته می‌شه و اجازه می‌ده بخشی خاص از یک عنصر، یا یک عنصر کاملاً مجازی که در HTML اصلاً وجود نداره، رو استایل بدیم.

selector::pseudo-element {
  property: value;
}

نکته نحوی مهم: استاندارد فعلی CSS، Pseudo-elementها رو با دو نقطه‌ویرگول (::) و Pseudo-classها رو با یک نقطه‌ویرگول (:) متمایز می‌کنه. البته به‌دلایل تاریخی، بعضی Pseudo-elementهای قدیمی (مثل :before و :after) با یک نقطه‌ویرگول هم هنوز در اکثر مرورگرها کار می‌کنن، ولی نوشتن با دو نقطه‌ویرگول، روش استاندارد و توصیه‌شده است.

before و after: ساخت محتوای مجازی

دو تا از پرکاربردترین Pseudo-elementها، ::before و ::after هستن که امکان اضافه کردن محتوا قبل یا بعد از محتوای اصلی یک عنصر رو، بدون نیاز به تغییر HTML، فراهم می‌کنن.

.quote::before {
  content: "«";
}

.quote::after {
  content: "»";
}

<p class="quote">این یک نقل‌قول است</p>

در این مثال، بدون اینکه هیچ تغییری در HTML بدیم، دو کاراکتر گیومه فارسی قبل و بعد از متن اضافه می‌شن. نکته مهمی که باید بدونی: هر ::before و ::after، همیشه به Property به اسم content نیاز دارن؛ بدون این Property، این Pseudo-elementها اصلاً هیچ‌چیزی تولید نمی‌کنن، حتی اگه مقدارش رشته خالی (content: "";) باشه.

کاربرد رایج: آیکون‌های تزئینی بدون HTML اضافه

.external-link::after {
  content: " ↗";
  font-size: 0.8em;
}

<a href="https://example.com" class="external-link">لینک خارجی</a>

این تکنیک خیلی رایجه: به‌جای اضافه کردن یک تصویر یا آیکون واقعی در HTML، از ::after برای نمایش یک نماد کوچک استفاده می‌شه.

first-letter: هدف قرار دادن اولین حرف

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: darkred;
}

<p>این یک پاراگراف نمونه با حرف اول بزرگ‌شده است.</p>

این Pseudo-element فقط اولین کاراکتر متن داخل عنصر رو هدف می‌گیره؛ تکنیکی که در طراحی مجلات و کتاب‌ها به «Drop Cap» معروفه.

first-line: هدف قرار دادن اولین خط

p::first-line {
  font-weight: bold;
}

برخلاف ::first-letter که فقط یک حرف رو می‌گیره، ::first-line کل اولین خط متن رو هدف قرار می‌ده؛ نکته جالب اینجاست که این خط، بسته به عرض صفحه یا عنصر، می‌تونه دینامیک تغییر کنه (یعنی مرورگر خودش تشخیص می‌ده اولین خط چقدر طوله).

selection: استایل‌دهی به متن انتخاب‌شده

::selection {
  background-color: gold;
  color: black;
}

این Pseudo-element ظاهر متنی رو که کاربر با ماوس یا صفحه‌کلید انتخاب و هایلایت کرده کنترل می‌کنه؛ یعنی همون حالتی که وقتی روی یک متن درگ می‌کنی، پس‌زمینه‌اش تغییر می‌کنه.

marker: استایل‌دهی به نشانگر لیست

li::marker {
  color: crimson;
  font-weight: bold;
}

<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
</ul>

این Pseudo-element، نشانگر (Bullet یا شماره) عناصر لیست رو هدف قرار می‌ده؛ به این ترتیب می‌شه رنگ یا فونت نشانگر رو، بدون تأثیر روی متن خود آیتم، تغییر داد.

placeholder: استایل‌دهی به متن راهنمای input

input::placeholder {
  color: #999;
  font-style: italic;
}

<input type="text" placeholder="نام خود را وارد کنید">

این Pseudo-element ظاهر متن راهنمایی (Placeholder) که داخل یک input خالی نمایش داده می‌شه رو کنترل می‌کنه.

تفاوت اصلی Pseudo-class و Pseudo-element

ویژگی	Pseudo-class	Pseudo-element
Syntax	یک نقطه‌ویرگول (:)	دو نقطه‌ویرگول (::)
هدف	حالت یا موقعیت یک عنصر واقعی	بخشی از عنصر یا یک عنصر مجازی
مثال	:hover، :first-child	::before، ::first-letter

ترکیب Pseudo-element با Pseudo-class

.card:hover::after {
  content: "بیشتر بدانید ←";
  color: royalblue;
}

این Selector می‌گه: «فقط وقتی موس روی .card قرار داره، یک محتوای مجازی بعد از اون نمایش بده». این ترکیب، نمونه‌ی خوبی از استفاده هم‌زمان Pseudo-class و Pseudo-element‌ه.

نکات مهم

• ::before و ::after بدون تعریف content اصلاً هیچ عنصری تولید نمی‌کنن.
• از نظر Specificity، Pseudo-elementها هم‌وزن با Type Selector محسوب می‌شن؛ یعنی هرکدوم (0,0,0,1) به مجموع اضافه می‌کنن.
• محتوای تولیدشده با ::before و ::after، در HTML واقعی وجود نداره و توسط ابزارهایی مثل صفحه‌خوان‌ها ممکنه به‌طور متفاوتی برخورد بشه؛ برای همین نباید محتوای معنایی مهم رو فقط با این روش اضافه کرد.

اشتباهات رایج

• فراموش کردن Property به اسم content در ::before یا ::after، که باعث می‌شه هیچ‌چیزی نمایش داده نشه.
• استفاده از ::before یا ::after برای نمایش اطلاعات مهم و معنایی که باید در HTML واقعی وجود داشته باشه، نه فقط به‌صورت بصری.
• قاطی کردن نحوه نوشتن Pseudo-class (یک نقطه‌ویرگول) با Pseudo-element (دو نقطه‌ویرگول).

جمع‌بندی

Pseudo-element با دو نقطه‌ویرگول (::) نوشته می‌شه و بخشی از یک عنصر یا یک محتوای کاملاً مجازی رو هدف قرار می‌ده؛ مثل ::before، ::after، ::first-letter، ::selection، ::marker و ::placeholder. برخلاف Pseudo-class که حالت یک عنصر واقعی رو نشون می‌ده، Pseudo-element یا بخشی مجزا از یک عنصر رو انتخاب می‌کنه یا اصلاً محتوایی می‌سازه که در HTML وجود نداره.