شبه‌عناصر (Pseudo-elements)

آشنایی با شبه‌عناصر CSS: ::before، ::after، ::first-line، ::selection و کاربردهای آن‌ها

شبه‌عنصر (Pseudo-element) چیست؟

شبه‌عنصر به شما اجازه می‌دهد بخشی از یک عنصر را استایل دهید — مثلاً اولین حرف، اولین خط، یا محتوایی که اصلاً در HTML وجود ندارد!

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

ویژگیشبه‌کلاس (:)شبه‌عنصر (::)
دونقطهتک (:)دوبل (::)
هدفوضعیت عنصربخشی از عنصر
مثال:hover::before

شبه‌عناصر اصلی

شبه‌عنصرتوضیح
::beforeمحتوای قبل از عنصر ⭐
::afterمحتوای بعد از عنصر ⭐
::first-lineاولین خط متن
::first-letterاولین حرف
::selectionمتن انتخاب شده
::placeholderمتن راهنمای input
::markerنشانه لیست

۱. ::before و ::after ⭐

مهم‌ترین شبه‌عناصر — محتوایی می‌سازند که در HTML نیست:

/* آیکون قبل از لینک */
    a::before {
        content: "🔗 ";
    }
    
    /* متن بعد از پاراگراف */
    .note::after {
        content: " ← توجه!";
        color: red;
    }

⚠️ توجه: همیشه content الزامی است — حتی اگر خالی.

کاربردهای ::before و ::after

/* دکمه با آیکون */
    .btn-download::before {
        content: "⬇";
        margin-left: 8px;
    }
    
    /* نشان ضروری */
    .required::after {
        content: " *";
        color: red;
    }
    
    /* زیرخط انیمیشنی */
    .fancy-link::after {
        content: "";
        display: block;
        height: 2px;
        width: 0;
        background: #3498db;
        transition: width 0.3s;
    }
    .fancy-link:hover::after {
        width: 100%;
    }

۲. ::first-letter (حرف اول)

p::first-letter {
        font-size: 3em;
        font-weight: bold;
        float: right;
        color: #3498db;
        margin-left: 5px;
    }

۳. ::first-line (خط اول)

p::first-line {
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

۴. ::selection (متن انتخاب شده)

::selection {
        background: #3498db;
        color: white;
    }
    
    ::moz-selection {
        background: #3498db;
        color: white;
    }

۵. ::placeholder

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

۶. ::marker (نشانه لیست)

li::marker {
        color: #3498db;
        font-size: 1.2em;
    }

ساخت اشکال با ::before و ::after

/* دایره تزئینی */
    .circle {
        position: relative;
    }
    .circle::before {
        content: "";
        position: absolute;
        top: -5px; right: -5px;
        width: 15px; height: 15px;
        background: #e74c3c;
        border-radius: 50%;
    }

Clearfix با شبه‌عنصر

.clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط