آموزش کار با Pseudo-elements (Before & After) برای خلق طرح‌های خاص

📊 نقشه راه: تسلط بر Pseudo-elements (::before & ::after)

با این راهنما، طراحی‌های خلاقانه فقط چند خط کد با شما فاصله دارند! برای شروع ماجراجوییت به صفحه اصلی ما هم سر بزن.

/* HTML */
<p class="quote">یک نقل قول الهام بخش.</p>

/* CSS */
.quote {
    position: relative;
    padding: 15px 30px;
    border-left: 5px solid #E74C3C;
    background-color: #F8F8F8;
    font-style: italic;
    color: #555;
}

.quote::before {
    content: "“"; /* یا هر کاراکتر یونیکد دیگر */
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 4em;
    color: #E74C3C;
    opacity: 0.3;
}

.quote::after {
    content: "”";
    position: absolute;
    bottom: -15px;
    right: 10px;
    font-size: 4em;
    color: #E74C3C;
    opacity: 0.3;
}
    

/* HTML */
<button class="download-btn">دانلود فایل</button>

/* CSS */
.download-btn {
    position: relative;
    padding: 10px 20px 10px 40px; /* فضای بیشتر برای آیکون */
    background-color: #27AE60;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.download-btn::before {
    content: url('data:image/svg+xml;utf8,');
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 20px; /* تنظیم ابعاد آیکون */
    height: 20px;
}

.download-btn:hover {
    background-color: #2ECC71;
}
    

/* HTML */
<div class="chapter-list">
    <h3>مقدمه</h3>
    <p>اولین بخش کتاب.</p>
    <h3>بدنه اصلی</h3>
    <p>محتوای اصلی مقاله.</p>
    <h3>نتیجه‌گیری</h3>
    <p>خلاصه مطالب.</p>
</div>

/* CSS */
.chapter-list {
    counter-reset: chapter; /* ایجاد شمارنده جدید به نام 'chapter' */
}

.chapter-list h3 {
    counter-increment: chapter; /* هر بار که h3 می‌بینیم، شمارنده را زیاد کن */
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    color: #2980B9;
}

.chapter-list h3::before {
    content: counter(chapter) ". "; /* محتوای شمارنده را نمایش بده */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #E74C3C;
    font-size: 1.2em;
}
    

/* HTML */
<div class="card">
    <h3>عنوان کارت</h3>
    <p>متن توضیحات کارت.</p>
</div>

/* CSS */
.card {
    position: relative; /* این خط حیاتی است! */
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card::before {
    content: "✨";
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 2em;
    background-color: #FEE715;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 10px rgba(254, 231, 21, 0.5);
    z-index: 10;
}
    

/* HTML */
<h2 class="decorated-title">خدمات ما</h2>

/* CSS */
.decorated-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block; /* برای اینکه خط زیرش دقیقا به اندازه متن باشه */
    font-size: 2em;
    color: #2C3E50;
}

.decorated-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #3498DB;
    border-radius: 2px;
}
    

/* HTML */
<a href="#" class="external-link">لینک به وب‌سایت دیگر</a>

/* CSS */
.external-link {
    position: relative;
    text-decoration: none;
    color: #2980B9;
    padding-right: 20px; /* فضای آیکون */
}

.external-link::after {
    content: "↗"; /* کاراکتر فلش یا آیکون SVG */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #27AE60;
    font-size: 0.9em;
}
    

/* HTML */
<a href="#" class="hover-underline">یک لینک جذاب</a>

/* CSS */
.hover-underline {
    position: relative;
    text-decoration: none;
    color: #34495E;
    padding-bottom: 5px;
    font-size: 1.1em;
}

.hover-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* عرض اولیه صفر */
    height: 2px;
    background-color: #E74C3C;
    transition: width 0.3s ease; /* انیمیشن روی عرض */
}

.hover-underline:hover::after {
    width: 100%; /* در هاور، عرض به 100% می‌رسد */
}
    

/* HTML */
<span class="tooltip-trigger" data-tooltip="این یک راهنمای مفید است!">متن با راهنما</span>

/* CSS */
.tooltip-trigger {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #95A5A6;
}

.tooltip-trigger::after {
    content: attr(data-tooltip); /* محتوا را از ویژگی data-tooltip می‌خواند */
    position: absolute;
    bottom: 120%; /* کمی بالاتر از عنصر والد */
    left: 50%;
    transform: translateX(-50%);
    background-color: #34495E;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0; /* ابتدا نامرئی */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.tooltip-trigger:hover::after {
    opacity: 1; /* در هاور، مرئی می‌شود */
    visibility: visible;
}
    

/* HTML */
<label class="custom-checkbox">
    <input type="checkbox">
    گزینه من
</label>

/* CSS */
.custom-checkbox input {
    position: absolute;
    opacity: 0; /* مخفی کردن اینپوت اصلی */
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    user-select: none;
    line-height: 25px; /* برای هم‌ترازی متن */
}

/* ظاهر چک‌باکس قبل از انتخاب */
.custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 2px solid #ccc;
    border-radius: 5px;
}

/* ظاهر علامت تیک بعد از انتخاب */
.custom-checkbox input:checked + ::before {
    background-color: #2196F3;
    border-color: #2196F3;
}

.custom-checkbox::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    opacity: 0; /* ابتدا مخفی */
    transition: opacity 0.2s ease;
}

.custom-checkbox input:checked + ::before + ::after {
    opacity: 1; /* در حالت انتخاب، تیک را نمایش بده */
}
    

/* HTML */
<div class="image-wrapper" data-caption="منظره‌ای زیبا از طبیعت">
    <img src="your-image.jpg" alt="تصویر طبیعت" style="max-width: 100%; display: block;">
</div>

/* CSS */
.image-wrapper {
    position: relative;
    width: 300px; /* یا هر عرض دلخواه */
    overflow: hidden; /* مهم برای اطمینان از قرار گرفتن کاور درون والد */
    margin: 20px;
}

.image-wrapper::before {
    content: attr(data-caption);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    transform: translateY(100%); /* ابتدا مخفی در پایین */
    transition: transform 0.3s ease;
}

.image-wrapper:hover::before {
    transform: translateY(0); /* در هاور، ظاهر می‌شود */
}
    

/* HTML */
<div class="section-divider"></div>

/* CSS */
.section-divider {
    position: relative;
    width: 100%;
    height: 50px; /* ارتفاع برای دیدن شکل */
    background-color: transparent;
    margin: 40px 0;
}

.section-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); /* چرخش برای ساخت لوزی */
    width: 30px;
    height: 30px;
    background-color: #9B59B6;
}

.section-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ECF0F1;
    z-index: -1; /* پشت شکل لوزی قرار بگیرد */
}
    

مشکل 1: Pseudo-element من اصلا نمایش داده نمی‌شه!

راه‌حل:

• مطمئن شو که ویژگی content رو اضافه کردی. بدون این ویژگی، هیچی نمایش داده نمی‌شه! حتی اگه محتوات خالی باشه، باید بنویسی content: "";
• بهش display: block; یا display: inline-block; دادی؟ یادت نره این عناصر به طور پیش‌فرض اینلاین هستن و بدون تنظیم display، نمی‌تونی بهشون width و height بدی.
• آیا width و height مناسبی بهش دادی؟ گاهی اوقات نمایش داده می‌شه ولی چون ابعادش صفر پیکسل هست، نمی‌تونی ببینیش.

مشکل 2: Pseudo-element من جای درستی قرار نمی‌گیره و می‌پره بالا یا پایین صفحه!

راه‌حل:

• به عنصر والد (همون عنصری که Pseudo-element بهش چسبیده) position: relative; دادی؟ این مهمترین دلیل این مشکله. بدون این، position: absolute; نسبت به کل صفحه (یا نزدیک‌ترین والد پوزیشن‌دار) عمل می‌کنه.
• مقادیر top، bottom، left، right رو درست تنظیم کردی؟ گاهی اوقات فقط یه صفر جا افتاده یا اشتباهی واحد دیگه ای استفاده کردی.
• z-index رو چک کن. شاید زیر یه عنصر دیگه پنهان شده باشه.

مشکل 3: محتوای Pseudo-element من قابل انتخاب یا کپی کردن نیست!

راه‌حل:

• درست می‌بینی رفیق! این یه محدودیت ها Pseudo-elements هست. محتوای اونها از نظر DOM واقعی نیست و قابل انتخاب یا کپی کردن نیست.
• راهکار: اگه محتوا باید قابل کپی یا انتخاب باشه، نباید از Pseudo-elements استفاده کنی. باید اون رو مستقیماً تو HTML به عنوان یک <span>، <div> یا هر تگ معنایی دیگه قرار بدی.

❓ آیا Pseudo-elements برای SEO خوب هستند؟

✅ برای محتوای تزئینی و غیرضروری برای معنای صفحه، بله. چون آنها محتوای واقعی DOM نیستند، توسط موتورهای جستجو ایندکس نمی‌شوند. این برای محتوای بصری و غیرمهم عالی است.

❓ می‌توانم چندین ::before یا ::after به یک عنصر اضافه کنم؟

❌ خیر. هر عنصر فقط می‌تواند یک ::before و یک ::after داشته باشد. اگر به عناصر بیشتری نیاز دارید، باید از HTML واقعی استفاده کنید یا Pseudo-elements را با تگ‌های تو در تو ترکیب کنید.

❓ آیا Pseudo-elements روی همه مرورگرها پشتیبانی می‌شوند؟

✅ بله، پشتیبانی گسترده‌ای دارند. ::before و ::after تقریباً توسط تمام مرورگرهای مدرن (و حتی بسیاری از قدیمی‌ترها) پشتیبانی می‌شوند. با این حال، استفاده از دو کولون (::) استاندارد جدیدتر است و تک کولون (:) برای سازگاری با IE8 و قدیمی‌تر استفاده می‌شد که الان دیگر نیازی نیست.

❓ چه تگ‌های HTML‌ای نمی‌توانند Pseudo-elements داشته باشند؟

✅ عناصر جایگزین شده (Replaced Elements) مثل <img>، <input>، <textarea>، <select> و <video> نمی‌توانند Pseudo-elements داشته باشند. این عناصر محتوای خود را از خارج از CSS دریافت می‌کنند.

❓ آیا می‌توانم به Pseudo-elements رویداد (event) اضافه کنم (مثلا کلیک)?

❌ خیر. Pseudo-elements جزئی از DOM واقعی نیستند و نمی‌توانند مستقیماً رویدادهای جاوااسکریپت را دریافت کنند. رویدادها باید روی عنصر والد اعمال شوند.