شبه عناصر CSS؛ before و after | درس 32 + پروژه درس

درس 32 از دوره آموزش HTML و CSS ارومیا دیزاین

برای اضافه کردن یک دایره کوچک کنار عنوان یا خط کوتاه زیر آن، همیشه به تگ تازه نیاز نداریم. شبه عناصر CSS اجازه می دهند بعضی قسمت های ظاهری را بدون افزودن عنصر مستقل به HTML بسازیم. در این درس با before و after یک عنوان تزئینی و پیوندهای خدمات می سازیم؛ سپس یاد می گیریم چه چیزی باید در CSS بماند و چه اطلاعاتی حتماً به HTML تعلق دارد.

دانلود پروژه درس: دریافت پروژه درس 32 و پاسخ تمرین (ZIP). فایل شامل index.html، style.css، solution.css و راهنمای آزمایش است. ZIP را استخراج و فایل HTML را باز کنید؛ پروژه به اینترنت، کتابخانه یا نصب ابزار وابسته نیست.

تفاوت شبه کلاس و شبه عنصر در CSS

در درس شبه کلاس های CSS حالت های hover و focus-visible را تمرین کردیم. شبه کلاس، عنصر را بر اساس وضعیت انتخاب می کند؛ برای نمونه، پیوند زیر اشاره گر را مشخص می کند. شبه عنصر، قسمتی قابل استایل از عنصر یا یک کادر تولیدشده مرتبط با آن را هدف می گیرد. before و after از نوع دوم هستند: کادرهایی قبل و بعد محتوای عنصر ایجاد می کنند.

.service-link:hover {
  color: #075985;
}

.service-link::after {
  content: "";
  display: block;
  height: 3px;
  background: #94a3b8;
}

در کد جدید، برای شبه عنصر از دو دونقطه استفاده می کنیم. شکل قدیمی :before و :after برای سازگاری در مرورگرها پذیرفته می شود، اما نوشتن ::before و ::after تفاوت آن را با شبه کلاس روشن می کند. نام کلاس service-link را خودمان انتخاب کرده ایم؛ after نام استاندارد شبه عنصر است. اگر ساختار انتخابگرها را فراموش کرده اید، درس انتخابگرهای CSS را مرور کنید.

before و after دقیقاً کجا قرار می گیرند؟

before پیش از محتوای عنصر و after پس از محتوای آن قرار می گیرد؛ هر دو به همان عنصر وابسته اند. این دو، عنصر خواهر یا برادر بیرون از کادر اصلی نمی سازند. عبارت «قبل» نیز الزاماً به معنی سمت چپ نیست: جهت متن، نوع نمایش و جریان صفحه روی جای نهایی اثر دارند. در صفحه فارسی پروژه، دایره قبل از نوشته در ابتدای راست عنوان دیده می شود.

<h2 class="decorated">آموزش طراحی سایت</h2>

در این HTML تنها یک عنوان واقعی داریم. هیچ تگ دایره یا خطی داخل آن ننوشته ایم. اگر CSS را موقتاً غیرفعال کنید، متن عنوان همچنان باقی می ماند و معنای صفحه کامل است. این یک معیار ساده برای انتخاب تزئین مناسب است: حذف آن نباید اطلاعات ضروری را از کاربر بگیرد. به همین دلیل، عنوان خدمات، قیمت، شماره تماس و برچسب فرم را با شبه عنصر جایگزین نمی کنیم.

نقش content؛ چرا شبه عنصر نمایش داده نمی شود؟

برای ساخته شدن کادر before یا after در این مثال، ویژگی content لازم است. رشته خالی یعنی متن اضافه نکن، اما کادر را ایجاد کن تا بتوانیم به آن اندازه و رنگ بدهیم. حذف content یا قرار دادن none در آن باعث می شود این شبه عنصر ساخته و نمایش داده نشود. رشته خالی با نبودن ویژگی یکسان نیست؛ کوتیشن های خالی بخشی ضروری از کد ما هستند.

.decorated::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background: #075985;
}

content می تواند رشته متنی هم بگیرد، ولی تولید متن مهم با CSS روش مناسبی برای این پروژه نیست. پشتیبانی ابزارهای کمکی از محتوای تولیدشده یکسان نیست و مدیریت یا ترجمه آن نیز از متن HTML جدا می شود. از کادر خالی برای شکل های صرفاً تزئینی استفاده می کنیم و نام واقعی پیوند را داخل تگ a نگه می داریم.

ساخت دایره قبل عنوان با before

کادر شبه عنصر به طور پیش فرض inline است. برای اینکه عرض و ارتفاع نمونه قابل استفاده باشند، display را inline-block می گذاریم. سپس با اندازه برابر و گردی کامل، دایره می سازیم. اندازه em به اندازه فونت همین کادر وابسته است و در نمونه، اندازه فونت را از عنوان به ارث می برد؛ در نتیجه تزئین با نوشته تناسب پیدا می کند.

.decorated::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: #075985;
}

ویژگی margin-inline-end فاصله را در انتهای جهت نوشتار می گذارد؛ در این صفحه فارسی، فاصله میان دایره و متن را ایجاد می کند. این انتخاب نسبت به وابسته کردن فاصله به چپ یا راست، برای تغییر جهت صفحه مناسب تر است. برای درک اندازه em، درس واحدهای اندازه گیری CSS و برای شکل دایره، درس border-radius و کادرها را مرور کنید.

ساخت خط زیر عنوان با after

اکنون کادر بعد از محتوا را به خط کوتاه تبدیل می کنیم. display برابر block، آن را در جریان عادی زیر نوشته قرار می دهد. عرض ثابت rem برای طول خط و ارتفاع چند پیکسلی برای ضخامت آن کافی است. برای این نمونه به position یا جابه جایی مطلق احتیاج نداریم؛ عنوان های چندخطی هم فضای لازم را در جریان صفحه اشغال می کنند.

.decorated::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-block-start: 8px;
  background: #0891b2;
  border-radius: 2px;
}

فاصله margin-block-start در این نوشتار افقی، فاصله بالای خط است. چون خط تزئینی کوتاه است، برای عنوان های طولانی هم همان طول را حفظ می کند. اگر خروجی شما متفاوت شد، ابتدا رفتار block و inline-block را بررسی کنید و سپس مقدارهای اندازه را ببینید؛ تغییر تصادفی همه ویژگی ها، پیدا کردن خطا را سخت تر می کند.

ترکیب hover و focus-visible با شبه عنصر

شبه کلاس و شبه عنصر را می توان در یک انتخابگر ترکیب کرد. در نمونه زیر، ابتدا پیوندی را که در حالت hover است انتخاب می کنیم و سپس after همان پیوند را استایل می دهیم. نشانگر کیبورد را نیز در نظر می گیریم تا کاربر فقط با ماوس به تغییر ظاهری دسترسی نداشته باشد. نام پیوند و مقصد واقعی آن همیشه در HTML وجود دارند.

<a class="service-link" href="#web">طراحی سایت</a>

.service-link::after {
  content: "";
  display: block;
  height: 3px;
  margin-block-start: 5px;
  background: #94a3b8;
}

.service-link:hover::after,
.service-link:focus-visible::after {
  background: #075985;
}

.service-link:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 4px;
}

در اینجا فقط رنگ خط عوض می شود؛ ارتفاع و فاصله آن از ابتدا تعریف شده اند، بنابراین ورود به حالت hover کادر تازه ای به جریان اضافه نمی کند. outline خود پیوند را نیز نگه داشته ایم. خط تزئینی جای نشانگر فوکوس واضح را نمی گیرد. اگر رنگ ها را تغییر دادید، خوانایی نوشته و تشخیص حلقه فوکوس را دوباره بررسی کنید؛ درس رنگ در CSS پیش نیاز خوبی است.

اشتباه های رایج هنگام استفاده از شبه عناصر CSS

اشتباه اول، فراموش کردن content است. اشتباه دوم، تعریف width و height روی کادر inline بدون توجه به display است. مورد سوم، افزودن فاصله اشتباه در انتخابگر است: .decorated ::before قبل از شبه عنصر فاصله دارد و شبه عناصر فرزندان را هدف می گیرد؛ با .decorated::before یکسان نیست. در پروژه، باید همان عنوان را مستقیم هدف بگیرید.

همچنین before و after را مستقیم روی img به عنوان یک راه عمومی و قابل اتکا قرار ندهید؛ img عنصر جایگزین شونده است و این شبه عناصر برای آن کاربرد معمول مورد انتظار را ندارند. اگر تصویر به تزئین نیاز داشت، یک والد مناسب را استایل دهید. در این درس تمام نمونه ها روی عنوان و پیوندی اجرا می شوند که محتوای عادی دارند.

اگر قانون شما درست است ولی رنگ دیده نمی شود، در ابزار توسعه مرورگر ببینید کدام قانون آن را بازنویسی کرده است. specificity و ترتیب قوانین همچنان روی شبه عناصر اثر دارند. به جای افزودن پشت سر هم important، درس آبشار و اولویت CSS را مرور کنید و انتخابگر و محل قانون را اصلاح کنید.

پروژه عملی درس 32 و روش آزمایش

پروژه سه بخش دارد: عنوان تزئینی آماده، پیوندهای تعاملی و کارت های خدمات برای تمرین مستقل. پس از باز کردن فایل HTML، با Tab میان پیوندها حرکت کنید و با Enter به مقصد هرکدام بروید. خط پیوند باید تغییر رنگ دهد و حلقه فوکوس هم دیده شود. سپس content دایره عنوان را در فایل CSS موقتاً حذف کنید؛ با بارگذاری دوباره، تنها دایره باید ناپدید شود و متن سالم بماند.

در Inspect، عنوان decorated را باز کنید و بخش before و after را ببینید. نمایش این بخش ها در ابزار توسعه به معنای وجود تگ مستقل در فایل HTML نیست. اندازه، display، رنگ زمینه و قانون content را جداگانه بررسی کنید. برای تشخیص فضای واقعی کادرها نیز می توانید از دانسته های مدل جعبه در CSS کمک بگیرید.

تمرین مستقل و پاسخ داخل ZIP

برای h3 های داخل بخش exercise، یک مربع 12px با فاصله 8px قبل عنوان و یک خط به عرض 3rem و ارتفاع 4px بعد عنوان بسازید. فقط عنوان کارت ها باید تغییر کنند؛ h2 بخش تمرین نباید مربع بگیرد. قبل از دیدن پاسخ، انتخابگر و دو قانون را خودتان بنویسید و در هر دو کارت آزمایش کنید.

.exercise h3::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 8px;
  background: #075985;
  border-radius: 3px;
}

.exercise h3::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-block-start: 8px;
  background: #0891b2;
}

پاسخ در solution.css قرار دارد و از ابتدا فعال نیست. برای مقایسه، لینک زیر را بعد از لینک style.css در head اضافه کنید. اگر خودتان پاسخ را در فایل اصلی نوشته اید، آن را موقتاً کنار بگذارید تا قوانین تکراری آزمایش را مبهم نکنند. راهنمای داخل ZIP مراحل آزمایش جهت متن را هم توضیح می دهد.

<link rel="stylesheet" href="solution.css">

دانلود فایل پروژه، پاسخ تمرین و راهنمای درس 32

پرسش های متداول

آیا before و after تگ واقعی به HTML اضافه می کنند؟

خیر؛ این دو کادرهای تولیدشده مرتبط با عنصر هستند. ابزار توسعه می تواند آن ها را نشان دهد، اما در فایل HTML تگ مستقلی برایشان نمی نویسیم.

چرا با content خالی یک شکل دیده می شود؟

رشته خالی کادر را ایجاد می کند، اما متن نمی سازد. display، اندازه و background باعث دیده شدن شکل می شوند.

می توان شماره تماس را با content اضافه کرد؟

برای اطلاعات ضروری این کار را انجام ندهید. شماره تماس باید در HTML واقعی و در صورت نیاز داخل پیوند مناسب باشد تا دسترسی و نگهداری آن روشن بماند.

آیا after همیشه زیر عنصر قرار می گیرد؟

خیر؛ بعد از محتوای عنصر تولید می شود. در نمونه این درس، display برابر block آن را در خط بعدی قرار می دهد.

فایل ZIP شامل پاسخ تمرین هم هست؟

بله؛ پروژه آماده، فایل CSS پاسخ و README داخل ZIP هستند. برای فعال کردن پاسخ باید لینک solution.css را مطابق راهنما اضافه کنید.

گام بعدی دوره

اکنون می توانید تزئین های ساده را با HTML کم تر بسازید و مرز ظاهر و اطلاعات اصلی را تشخیص دهید. در درس بعد، انتخاب عناصر بر اساس جایگاهشان در ساختار را با first-child، last-child و nth-child تمرین می کنیم؛ این انتخابگرها برای فهرست ها و ردیف های تکراری کاربرد دارند.

مطالعه تکمیلی: مستند before در MDN و مستند after در MDN.