آموزش کامل شبه عناصر در CSS

مقدمه

شبه عناصر (Pseudo-elements) در CSS امکان اعمال استایل به بخش‌های خاص یک عنصر را فراهم می‌کنند. با استفاده از شبه عناصر می‌توان قبل یا بعد از محتوا، اولین حرف، اولین خط و بخش‌های دیگر را استایل‌دهی کرد. برای یادگیری حرفه‌ای CSS و طراحی پیشرفته پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی شبه عناصر

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

::before → اضافه کردن محتوا قبل از محتوای اصلی عنصر
::after → اضافه کردن محتوا بعد از محتوای اصلی عنصر
::first-letter → انتخاب اولین حرف متن
::first-line → انتخاب اولین خط متن
::selection → انتخاب بخش های هایلایت شده متن

مثال عملی با کد

استفاده از ::before:

p::before {
  content: "✔ ";
  color: green;
}

استفاده از ::after:

p::after {
  content: " 📌";
}

استایل اولین حرف:

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

استایل اولین خط:

p::first-line {
  text-transform: uppercase;
  color: blue;
}

تغییر ظاهر متن انتخاب شده:

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

نکات مهم و توضیحات تکمیلی

استفاده از شبه عناصر به زیبایی و تعامل بصری محتوا کمک می‌کند.
می‌توان شبه عناصر را با کلاس‌ها و ID‌ها ترکیب کرد.
در طراحی Responsive، کنترل شبه عناصر باعث خوانایی بهتر می‌شود.
برای ایجاد جلوه‌های بصری پیشرفته، استفاده همزمان از ::before و ::after توصیه می‌شود.