آموزش CSS - شبه عناصر(pseudo elements)

شبه عنصرها (pseudo-elements) در CSS، ابزاری هستند که به شما امکان می‌دهند تا به برخی از عناصر HTML افکت‌ها و تغییرات ظاهری اعمال کنید،و دیگر نیازی به اضافه کردن عنصر اضافی به HTML یا استفاده از جاوا اسکریپت یا هر اسکریپت دیگری نداشته باشید .

نحوه نوشتاری شبه عنصر  :

selector:pseudo-element {property: value}

 شبه عنصرهای پرکاربرد در CSS عبارتند از before:: و after:. این شبه عناصر به شما این امکان را می‌دهند که محتوایی را به داخل یک عنصر HTML اضافه کنید و به آن محتوا استایل‌ها و جلوه‌های ویژه اعمال کنید.

نحوه استفاده :

selector::before {
  /* استایل‌ها و تنظیمات برای محتوای قبل از عنصر */
  content: " ";
  display: block; /* یا inline-block بر اساس نیاز */
}

selector::after {
  /* استایل‌ها و تنظیمات برای محتوای پس از عنصر */
  content: " ";
  display: block; /* یا inline-block بر اساس نیاز */
}

مثال :

button::before {
  content: "\2022"; /* نقطه چین (bullet) */
  margin-right: 8px; /* فاصله از راست متن دکمه */
}

a::after {
  content: " →"; /* فلش به سمت راست برای لینک‌ها */
  color: #007bff; /* رنگ فلش */
}

در مثال بالا ، با استفاده از شبه عنصر before:: به دکمه یک نقطه چین اضافه شده و با شبه عنصر after::به لینک یک فلش به سمت راست افزوده شده است. تنظیمات استایل مربوط به این شبه عناصر به ترتیب در بخش‌های before:: و after:: قرار داده شده‌اند.
 
کلاس های CSS همچنین می توانند از شبه عناصر استفاده شوند

selector.class:pseudo-element {property: value}

رایج ترین شبه عناصر مورد استفاده به شرح زیر است:

شبه عنصرfirst-line:

first-line: ، first-line:: در واقع به یکدیگر مشابه هستند و تفاوت اساسی بین آن دو در نحوه نمایش CSS است. دو نقطه دوقلو (::) نشانگر یک شبه عنصر CSS در (CSS3) هستند. این دو به عنوان یک شبه عنصر برای اضافه کردن محتوا یا تنظیمات به قسمتی از محتوای یک عنصر HTML استفاده می‌شوند.

نحوه استفاده:

selector:first-line {
  /* استایل‌ها و تنظیمات برای خط اول متن */
}

p:first-line {
  font-weight: bold; /* تغییر وزن متن خط اول به Bold */
  color: #ff0000; /* تغییر رنگ متن خط اول به قرمز */
}

در مثال بالا ، با استفاده از first-line: بر روی پاراگراف (p)، استایل‌هایی برای خط اول متن تعیین شده‌اند. متن خط اول این پاراگراف حالا با وزن bold و رنگ قرمز نمایش داده می‌شود.

شبه عنصرfirst-letter: 

first-letter:: و :first-letter: در واقع به یکدیگر مشابه هستند و تفاوت اساسی بین آن دو در نحوه نمایش CSS است. دو نقطه دوقلو (::) نشانگر یک شبه عنصر CSS در  (CSS3) هستند. این دو به عنوان یک شبه عنصر برای اضافه کردن محتوا یا تنظیمات به قسمتی از محتوای یک عنصر HTML استفاده می‌شوند.

نحوه استفاده:

selector:first-letter {
  /* استایل‌ها و تنظیمات برای حرف اول متن */
}

مثال:

p:first-letter {
  font-size: 1.5em; /* افزایش اندازه حرف اول */
  color: #008000; /* تغییر رنگ حرف اول به سبز */
  float: left; /* شناور کردن حرف اول به چپ */
}

در مثال بالا ، با استفاده از first-letter: بر روی پاراگراف (p)، تنظیماتی برای حرف اول متن تعیین شده‌اند. حرف اول این پاراگراف حالا با اندازه بزرگتر، رنگ سبز و شناور به سمت چپ نمایش داده می‌شود.

شبه عنصرbefore :

before: و before:: در واقع به یکدیگر مشابه هستند و تفاوت اساسی بین آن دو در نحوه نمایش CSS است. دو نقطه دوقلو (::) نشانگر یک شبه عنصر CSS در (CSS3) هستند. این دو به عنوان یک شبه عنصر برای اضافه کردن محتوا یا تنظیمات به قسمتی از محتوای یک عنصر HTML استفاده می‌شوند.

نحوه استفاده:

selector:before {
  /* استایل‌ها و تنظیمات برای محتوای قبل از عنصر */
  content: " ";
  display: block; /* یا inline-block بر اساس نیاز */
}

مثال:

blockquote:before {
  content: "\201C"; /* نقل قول باز (opening double quotation mark) */
  color: #888; /* رنگ نقل قول */
  font-size: 2em; /* اندازه متن نقل قول */
  margin-right: 0.5em; /* فاصله از راست متن نقل قول */
}

در مثال بالا ، با استفاده از before: بر روی بلوک نقل قول (blockquote)، یک نقل قول باز اضافه شده است. تنظیمات استایل برای این شبه عنصر در بخش before: قرار داده شده‌اند.

شبه عنصرafter:

after: و after:: در واقع به یکدیگر مشابه هستند. این تفاوت اساسی بین آن دو در نحوه نمایش CSS است. دو نقطه دوقلو (::) نشانگر یک شبه عنصر CSS در  (CSS3) هستند. از نظر عملکرد و کاربرد، هر دو به عنوان یک شبه عنصر برای اضافه کردن محتوا یا تنظیمات به قسمتی از محتوای یک عنصر HTML استفاده می‌شوند.

نحوه استفاده:

selector:after {
  /* استایل‌ها و تنظیمات برای محتوای پس از عنصر */
  content: " ";
  display: block; /* یا inline-block بر اساس نیاز */
}

مثال:

div:after {
  content: "🎉"; /* یک emoji (شادی) پس از محتوای دیو */
  font-size: 1.5em; /* اندازه emoji */
  color: #ffcc00; /* رنگ emoji */
}

در مثال بالا ، با استفاده از after: بر روی دیو (div)، یک emoji شادی پس از محتوای دیو افزوده شده است. تنظیمات استایل برای این شبه عنصر در بخش after: قرار داده شده‌اند.