العمل مع الفئات الزائفة Pseudo-Classes والعناصر الزائفة Pseudo-Elements في CSS

صيغة العناصر الزائفة Pseudo-element Syntax

لتطبيق عنصر زائف (pseudo-element)، قم بإلحاقه بمحدد العنصر الأصلي باستخدام علامة النقطتين المزدوجتين (::). لاحظ أن المحدد يمكن أن يكون من أي نوع، كأن يكون محدد فئة (class) أو محدد مُعرِّف (ID). إليك الشكل العام للصيغة الأساسية للعناصر الزائفة:

selector::pseudo-element {
 property: value;
}
            

هذا النقطتان المتتاليتان (double colon) هما ما يميّز العناصر الزائفة (pseudo-elements) عن الفئات الزائفة (pseudo-classes)، التي تستخدم نقطتان فقط (single colon).

تتيح لك العناصر الزائفة (pseudo-elements) تنسيق أجزاء محددة من محتوى عنصر ما، أو إدراج محتوى قبل هذا العنصر أو بعده، لكنها لا يمكن أن توجد بشكل مستقل. ويُطلق على العنصر الذي يرتبط به العنصر الزائف اسم "العنصر الأصلي" (originating element).

العناصر الزائفة ::before و ::after

لنبدأ بالاطلاع على أمثلة للعناصر الزائفة ::before و ::after. فكما يوحي اسماهما، يتيح لك ::before إدراج محتوى قبل محتوى العنصر مباشرةً، بينما يتيح لك ::after إدراج محتوى بعده.

إليك مثال على عنصر زر (button). في لغة CSS، سنستخدم التموضع المطلق (absolute positioning) والعنصر الزائف (pseudo-element) المسمى ::before لإضافة نجمة قبل نص اعرف المزيد الموجود داخل الزر. ستتعرف على المزيد حول التموضع المطلق (absolute positioning) في دروس قادمة.

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

<button class="cta-button">اعرف المزيد</button>
            

.cta-button {
 background-color: lightseagreen;
 color: white;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 position: relative;
}

.cta-button::before {
 content: "⭐";
 position: absolute;
 right: 3px;
 top: 8px;
 font-size: 0.75rem;
}
            

معاينة:

تُستخدم الخاصية content لإضافة محتوى قبل نص الزر. في هذا المثال، نقوم بإضافة رمز نجمة. ستلاحظ أنه لا يمكنك إضافة محتوى فحسب، بل يمكنك أيضاً تنسيقه. إليك مثال على استخدام العنصر الزائف ::after مع الزر ذاته:

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

<button class="cta-button">اعرف المزيد</button>
            

.cta-button {
 background-color: orange;
 border: none;
 padding: 10px 30px;
 cursor: pointer;
 position: relative;
}

.cta-button::after {
 content: "⬅️";
 position: absolute;
 left: 5px;
 bottom: 6px;
 font-size: 1.125rem;
 transition: transform 0.3s ease;
}
            

معاينة:

في العنصر الزائف ::after ، تُستخدم الخاصية transition لإجراء تغييرات متحركة (animate changes) على مدار 0.3 ثانية مع تأثير تدرج في السرعة (easing effect)، مما يضفي طابعاً سلساً وتدريجياً على التحول بدلاً من حدوثه بشكل مفاجئ. ستتعرف على المزيد حول الخاصية transition في دروس قادمة.

يمكنك أيضاً إلحاق فئة زائفة (pseudo-class) بالمحتوى الذي تدرجه داخل محتوى آخر باستخدام العناصر الزائفة (pseudo-elements) مثل ::before و ::after. على سبيل المثال، يمكنك إضافة حالة "التمرير بالفأرة" (hover state) لهذا المحتوى. إليك مثال على ذلك:

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

<button class="cta-button">اعرف المزيد</button>
            

.cta-button {
 background-color: orange;
 border: none;
 padding: 10px 30px;
 cursor: pointer;
 position: relative;
}

.cta-button::after {
 content: "⬅️";
 position: absolute;
 left: 5px;
 bottom: 6px;
 font-size: 1.125rem;
 transition: transform 0.3s ease;
}

.cta-button:hover::after {
 transform: translateX(-2px);
}
            

معاينة:

عند استخدام الخاصية transform: translateX(-2px) في حالة التمرير (hover)، يندفع المحتوى بمقدار 2px نحو اليسار كلما مرر المستخدم مؤشر الفأرة فوق الزر. أما خاصية (transition) المطبقة على العنصر الزائف ::after فتضمن استغراق هذه العملية 0.3 ثانية 0.3s.

هذا ما تفعله خاصية transform ؛ فهي تتيح لك تدوير عنصر ما، أو إمالته، أو تغيير حجمه، أو تحريكه في اتجاه معين. ستتعرف على المزيد حول هذا الموضوع في دروس قادمة.

العنصر الزائف ::first-letter

في المثال التالي، سنلقي نظرة على العنصر الزائف ::first-letter. يستهدف هذا العنصر الزائف الحرف الأول (the first letter) من محتوى عنصرٍ ما، مما يتيح لك تنسيقه. إليك مثال يتضمن نصاً في فقرة؛ فإذا أردنا تنسيق الحرف الأول، يمكننا استخدام العنصر الزائف ::first-letter على النحو التالي:

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

<p>معًا نصنع مستقبل التقنية العربية</p>
            

p::first-letter {
 font-size: 2rem;
}
            

معاينة:

العنصر الزائف ::marker

في المثال الأخير، سنتناول العنصر الزائف ::marker ، الذي يتيح لك تحديد العلامات أو النقاط أو الأرقام الخاصة بعناصر القائمة (list items) لتنسيقها. يوفر العنصر الزائف ::marker وسيلةً لتعزيز الهوية البصرية لموقعك الإلكتروني، وذلك من خلال تخصيص علامات القوائم لتتناغم مع نظام الألوان المعتمد في موقعك.

إليك مثال على قائمة غير مرتبة (unordered list) وقائمة مرتبة (ordered list). لتغيير لون وحجم العلامة المميزة لعناصر القائمة، يمكنك استخدام العنصر الزائف (pseudo-element) المسمى ::marker على النحو التالي:

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

<ul>
 <li>عنصر قائمة غير مرتبة 1</li>
 <li>عنصر قائمة غير مرتبة 2</li>
 <li>عنصر قائمة غير مرتبة 3</li>
 <li>عنصر قائمة غير مرتبة 4</li>
</ul>

<ol>
 <li>عنصر قائمة مرتبة 1</li>
 <li>عنصر قائمة مرتبة 2</li>
 <li>عنصر قائمة مرتبة 3</li>
 <li>عنصر قائمة مرتبة 4</li>
</ol>
            

li::marker {
 color: crimson;
 font-size: 1.5em;
 font-weight: bold;
}
            

معاينة: