شبه المان ها در CSS

شبه‌المان‌ها (pseudo-elements) ابزاری قدرتمند در CSS هستند که به شما اجازه می‌دهند بخش‌هایی از محتوا را بدون تغییر در HTML، تولید یا استایل‌دهی کنید. برخلاف کلاس‌ها و آی‌دی‌ها که به عناصر واقعی اشاره می‌کنند، شبه‌المان‌ها بخشی از یک عنصر را هدف می‌گیرند یا محتوایی تولید می‌کنند — مثلاً اولین حرف یک پاراگراف یا یک آیکون تزئینی قبل از متن لینک.

چرا مفید هستند؟

کاهش پیچیدگی HTML و جداسازی ظاهر از ساختار.
ایجاد تزئینات بصری بدون افزودن عناصر اضافی.
قابلیت کنترل دقیق‌تر روی بخش‌هایی از یک عنصر (مانند ::first-letter).

پرانتزها و سینتکس ( :: vs : )

در CSS3 برای شبه‌المان‌ها از دو نقطه دوگانه (::) استفاده می‌شود، اما برای سازگاری تاریخی نسخه‌های قدیمی‌تر یک نقطه هم پشتیبانی می‌شود (:before, :after). توصیه می‌شود از :: استفاده کنید مگر اینکه نیاز به پشتیبانی از مرورگرهای خیلی قدیمی باشد.

شبه‌المان‌های رایج و مثال‌ها

::before و ::after

a.button::before {
  content: "🔒";
  margin-right: 6px;
}

در این مثال، برای تمام لینک‌هایی با کلاس button یک گلیف قفل قبل از متن اضافه می‌شود. نکته کلیدی: بدون مقدار content، شبه‌المان نمایش داده نمی‌شود؛ content لازم است حتی اگر مقدارش خالی (“”) باشد.

بهینه‌سازی: آیکون تزئینی با aria-hidden

a.button::before {
  content: "🔒";
  margin-right: 6px;
  aria-hidden: true; /* توجه: این در CSS معتبر نیست */}

نکته مهم: aria-hidden را نمی‌توان در CSS تنظیم کرد. برای دسترسی‌پذیری اگر آیکون تزئینی است باید در HTML یا از راه‌حل‌هایی مثل role="img" و صفات ARIA در خود عنصر استفاده شود یا متن تولیدشده را با aria-hidden در DOM واقعی مخفی کنید. در عمل بهتر است از یک عنصر واقعی یا تکنیک‌های JS برای ARIA استفاده کنید.

::first-letter و ::first-line

p.dropcap::first-letter {
  font-size: 3rem;
  float: left;
  line-height: 1;
  margin-right: 0.2em;
}

این کد یک «درپ کپ» برای پاراگراف‌هایی با کلاس dropcap ایجاد می‌کند. ::first-line می‌تواند ویژگی‌هایی مثل فونت، رنگ و فاصله خط را تغییر دهد اما نه همه‌ی ویژگی‌ها (مثلاً نه margin یا float).

::placeholder

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

استایل دهی متن placeholder در فیلدهای ورودی. توجه داشته باشید که برخی مرورگرها نسخه‌های متفاوت این شبه‌المان را پیاده‌سازی کرده‌اند؛ برای پشتیبانی بهتر ممکن است به پیشوندهای مرورگر نیاز باشد.

::marker

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

::marker اجازه می‌دهد استایل بولت یا شماره لیست را تغییر دهید بدون دست‌کاری محتوای لیست. محدودیت: ویژگی‌های زیادی قابل اعمال نیست و برخی خواص نمودار متفاوتی دارند.

نکات پیشرفته و بهترین روش‌ها

فقط برای تزئینات غیرتعامل‌پذیر: از شبه‌المان‌ها برای محتوای تعاملی (مثل دکمه‌هایی که باید فشرده شوند) استفاده نکنید چون دسترسی (accessibility) و تعامل صفحه ممکن است مختل شود.
استفاده از CSS Variables: برای تم‌دهی پویا می‌توانید مقادیر شبه‌المان‌ها را با متغیرهای CSS کنترل کنید.
لبه‌ها و استکینگ کانتکست: شبه‌المان‌ها می‌توانند استکینگ کانتکست ایجاد کنند؛ در نتیجه z-index و position را با دقت تنظیم کنید.
کاهش DOM: استفاده از شبه‌المان‌ها می‌تواند تعداد عناصر HTML را کم کند و عملکرد را بهبود دهد، اما بیش‌استفاده ممکن است کد را پیچیده کند.
قوانین تعامل با نمایش: برخی شبه‌المان‌ها به صورت inline عمل می‌کنند مگر اینکه display را تغییر دهید.

نمونه: استفاده از CSS Variable در ::after

.card::after {
  content: "";
  display: block;
  height: 4px;
  background: var(--accent, #007bff);
  margin-top: 12px;
}

در این مثال یک نوار رنگی در انتهای کارت اضافه می‌شود که رنگ آن از متغیر --accent گرفته می‌شود. اگر این متغیر تعریف نشده باشد از رنگ پیش‌فرض #007bff استفاده می‌شود. مزیت: تغییر رنگ کارت‌ها فقط با تغییر یک متغیر امکان‌پذیر است.

محدودیت‌ها و نکات سازگاری

بعضی شبه‌المان‌ها در مرورگرها تفاوت‌هایی دارند: مثلاً ::placeholder در مرورگرهای قدیمی‌تر نیاز به پیشوند دارد، و ::selection فقط توانایی تغییر رنگ پس‌زمینه و رنگ متن را دارد. همچنین قابلیت‌های تعاملی (مثل دریافت فوکوس) معمولاً به شبه‌المان‌ها اختصاص ندارد.

شبه‌المان	کاربرد	پشتیبانی کلی
::before / ::after	تولید محتوای تزئینی	عالی
::first-letter / ::first-line	استایل‌بخشی به اولین حرف/خط	عالی
::placeholder	متن پیش‌فرض input	خوب (ممکن است پیشوند نیاز باشد)
::marker	استایل بولت/شماره لیست	خوب (جدیدتر)

دسترس‌پذیری (Accessibility)

اگر شبه‌المان محتوای مهمی تولید می‌کند (مثلاً متن اطلاع‌رسان)، آن محتوا باید در HTML واقعی وجود داشته باشد یا با ARIA/JS قابل دسترسی شود. برای عناصر صرفاً تزئینی از شبه‌المان‌ها استفاده کنید و به اسکرین‌ریدرها فکر کنید.

نتیجه‌گیری و توصیه‌ها

شبه‌المان‌ها ابزار بسیار مفیدی برای افزودن تزئینات، بهبود تجربه کاربری و کاهش پیچیدگی HTML هستند. اما استفادهٔ صحیح نیازمند توجه به دسترس‌پذیری، سازگاری مرورگرها و قواعد CSS است. همواره قبل از تولید محتوای مهم با CSS، امکان جایگزینی در HTML یا روش‌های دسترس‌پذیرتر را بررسی کنید.

اگر می‌خواهید مثالی خاص برای پروژه‌تان داشته باشید (مثلاً درپک، لیست سفارشی یا placeholder ویژه)، می‌توانم یک قطعه کد مختص نیاز شما بنویسم.

آیا این مطلب برای شما مفید بود ؟

خیر

بله