Pseudo-elementها (::before، ::after، ::first-letter، ::selection، ::marker، ::placeholder)

جمع‌بندی خانواده Pseudo-elementها: مرور کامل شش عضو اصلی

در فصل ۳ (درس ۳-۶)، با مفهوم Pseudo-element و شش عضو اصلی این خانواده، به‌طور کامل آشنا شدیم. چون این فصل، اختصاصاً به دسته‌بندی کامل Pseudo-classها و Pseudo-elementها می‌پردازه، این درس، آخرین درس آموزشی فصل هفدهمه و یک مرور نهایی و ترکیبی روی همون شش Pseudo-element‌ه؛ با تمرکز بیشتر روی کاربردهای عملی و ترکیب‌شون با مفاهیمی که در فصل‌های بعدی (مثل فصل ۱۵ با attr()) یاد گرفتیم.

مرور: ::before و ::after

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

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

همون‌طور که در فصل ۳ دیدیم، این دو Pseudo-element، محتوای مجازی رو، قبل یا بعد از محتوای واقعی یک عنصر، بدون نیاز به تغییر HTML، اضافه می‌کنن؛ و همیشه به یک مقدار برای content نیاز دارن.

ترکیب ::before/::after با attr(): یادآوری از فصل ۱۵

a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: gray;
}

دقیقاً همون مثالی که در فصل ۱۵ (درس ۱۵-۴) دیدیم: ترکیب ::after با تابع attr()، امکان نمایش خودکار مقدار یک ویژگی HTML (مثل آدرس واقعی یک لینک)، بعد از متن اصلی، بدون تکرار دستی، رو فراهم می‌کنه.

مرور: ::first-letter و ::first-line

p::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  float: inline-start;
}

همون‌طور که در فصل ۳ دیدیم، ::first-letter فقط اولین کاراکتر یک بلوک متنی رو هدف می‌گیره (تکنیک Drop Cap در طراحی مجلات). یک نکته تکمیلی: ترکیبش با float (که در فصل ۱۱، درس ۱۱-۵ به‌طور خلاصه بهش اشاره کردیم)، جلوه بصری‌ای می‌سازه که حرف بزرگ‌شده، در گوشه پاراگراف قرار می‌گیره و بقیه متن، دورش می‌پیچه.

مرور: ::selection

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

همون‌طور که در فصل ۳ دیدیم، این Pseudo-element، ظاهر متن انتخاب‌شده (Highlight شده با ماوس یا صفحه‌کلید) رو کنترل می‌کنه. یک نکته مهم درباره محدودیت‌ها: تعداد Propertyهایی که می‌شه روی ::selection تنظیم کرد، محدوده (عمدتاً color، background-color، و چند مورد دیگه مثل text-shadow)؛ Propertyهایی مثل display یا margin، روی این Pseudo-element، اصلاً معنا و کاربرد ندارن.

مرور: ::marker

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

همون‌طور که در فصل ۳ دیدیم، این Pseudo-element، نشانگر (Bullet یا شماره) عناصر لیست رو، مستقل از خود متن آیتم، هدف می‌گیره.

یک نکته تکمیلی درباره ::marker: محدودیت Propertyها

li::marker {
  content: "→ ";
  font-size: 1.2em;
}

یک نکته‌ای که در فصل ۳ کمتر بهش پرداختیم: ::marker، برخلاف ::before/::after، فقط مجموعه محدودی از Propertyها رو می‌پذیره (عمدتاً مرتبط با متن و رنگ، مثل color، font-*، و خود content)؛ Propertyهایی مثل background-color یا border، روی ::marker، پشتیبانی گسترده و قابل‌اعتمادی ندارن.

مرور: ::placeholder

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

همون‌طور که در فصل ۳ دیدیم، این Pseudo-element، ظاهر متن راهنمای داخل یک input خالی رو کنترل می‌کنه.

ترکیب ::placeholder با مفاهیم فصل ۱۷: :focus

input::placeholder {
  color: #999;
  transition: color 0.2s;
}

input:focus::placeholder {
  color: #ccc;
}

یک ترکیب رایج و عملی: تغییر رنگ Placeholder (روشن‌تر و کمرنگ‌تر شدنش)، وقتی کاربر، روی همون input، فوکوس می‌کنه (که در همین فصل، در درس ۱۷-۱ باهاش آشنا شدیم)؛ این جلوه ظریف، به کاربر، بازخورد بصری اضافه‌ای می‌ده که «الان داری روی این فیلد کار می‌کنی».

جدول جمع‌بندی نهایی شش Pseudo-element

Pseudo-element	هدف	نیاز به content؟
::before	قبل از محتوای اصلی	بله
::after	بعد از محتوای اصلی	بله
::first-letter	اولین حرف یک بلوک متنی	خیر
::selection	متن انتخاب‌شده توسط کاربر	خیر
::marker	نشانگر آیتم‌های لیست	خیر (اختیاری)
::placeholder	متن راهنمای input خالی	خیر

یک مثال کامل و جامع: ترکیب چند Pseudo-element در یک فرم

.form-title::before {
  content: "📝 ";
}

.form-title::first-letter {
  font-size: 1.3em;
}

.required-field label::after {
  content: " *";
  color: crimson;
}

input::placeholder {
  color: #aaa;
}

input:focus::placeholder {
  opacity: 0.5;
}

::selection {
  background-color: #cce5ff;
}

این مثال نهایی، تقریباً تمام شش Pseudo-element این خانواده رو، در یک فرم واقعی، کنار هم به‌کار می‌گیره: آیکون قبل از تیتر با ::before، بزرگ‌نمایی حرف اول تیتر با ::first-letter، ستاره اجباری بعد از برچسب با ::after، رنگ متن راهنما با ::placeholder (که با :focus هم تغییر می‌کنه)، و رنگ متن انتخاب‌شده با ::selection.

نکات مهم

• ::before و ::after، همیشه به یک مقدار برای content نیاز دارند؛ در غیر این‌صورت، هیچ محتوایی تولید نمی‌کنند.
• ::selection و ::marker، برخلاف ::before/::after، فقط مجموعه محدودی از Propertyها را می‌پذیرند.
• ترکیب Pseudo-elementها با Pseudo-classها (مثل input:focus::placeholder)، امکان ساخت جلوه‌های بصری پویا و واکنش‌گرا را فراهم می‌کند.

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

• فراموش کردن Property به اسم content در ::before یا ::after، که باعث می‌شود هیچ‌چیزی نمایش داده نشود.
• تلاش برای تنظیم Propertyهایی مثل background-color یا margin روی ::selection یا ::marker، که پشتیبانی گسترده و قابل‌اعتمادی ندارند.
• استفاده از ::before/::after برای نمایش اطلاعات معنایی مهم، به‌جای قرار دادن آن‌ها مستقیماً در HTML واقعی.

جمع‌بندی

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