العناصر الزائفة والمحتوى المُولّد

ما هي العناصر الزائفة؟

تتيح لك العناصر الزائفة تنسيق اجزاء محددة من العنصر او إنشاء عناصر افتراضية غير موجودة في ترميز HTML. بينما تستهدف الفئات الزائفة (التي تمت تغطيتها في الدرس السابق) العناصر في حالة معينة، تستهدف العناصر الزائفة اجزاء فرعية من العناصر -- مثل السطر الاول من فقرة او الحرف الاول او محتوى جديد تماما يتم إدراجه قبل العنصر او بعده.

تستخدم العناصر الزائفة صيغة نقطتين مزدوجتين (::) لتمييزها عن الفئات الزائفة (التي تستخدم نقطتين مفردتين). الصيغة العامة هي:

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

/* امثلة */
p::first-line { font-weight: bold; }
h1::first-letter { font-size: 2em; }
.quote::before { content: '\201C'; }
.quote::after { content: '\201D'; }

هناك قاعدة مهمة: يمكنك تطبيق عنصر زائف واحد فقط لكل محدد. لا يمكنك ربط عنصرين زائفين مثل p::first-line::first-letter. ومع ذلك، يمكنك الجمع بين عنصر زائف وفئات زائفة، مثل a:hover::after.

::before و ::after -- الأعمدة الرئيسية

العنصران الزائفان ::before و ::after هما الاكثر استخداما في CSS على الإطلاق. ينشئان عناصر فرعية افتراضية يتم إدراجها كـاول عنصر فرعي (لـ ::before) او آخر عنصر فرعي (لـ ::after) للعنصر المحدد. هذه العناصر الافتراضية غير موجودة في DOM -- هي بصرية بالكامل ويتم إنشاؤها بالكامل بواسطة CSS.

خاصية content -- مطلوبة

كلا من ::before و ::after يتطلبان خاصية content للعمل. بدون content، لن يتم عرض العنصر الزائف على الإطلاق. حتى إذا كنت تريد عنصرا زائفا فارغا (لأغراض زخرفية بحتة)، يجب تعيين content: '' (سلسلة فارغة).

تقبل خاصية content عدة انواع من القيم:

• السلاسل النصية -- محتوى نصي بين علامات اقتباس: content: 'مرحبا'
• سلسلة فارغة -- تُستخدم للعناصر الزخرفية: content: ''
• attr() -- تدرج قيمة سمة HTML: content: attr(data-label)
• url() -- تدرج صورة: content: url(icon.svg)
• counter() -- تدرج قيمة عداد CSS: content: counter(section)
• open-quote / close-quote -- تدرج علامات اقتباس بناء على خاصية quotes
• no-open-quote / no-close-quote -- تزيد/تنقص تداخل الاقتباس بدون إدراج حروف
• الدمج -- يمكنك الجمع بين عدة قيم: content: 'الفصل ' counter(chapter) ': '

/* محتوى نصي */
.required-field::after {
    content: ' *';
    color: #e74c3c;
    font-weight: bold;
}

/* سلسلة فارغة للعناصر الزخرفية */
.divider::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #3498db;
    margin-top: 10px;
}

/* attr() -- عرض رابط href عند الطباعة */
@media print {
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}

/* attr() -- تلميحات من سمات البيانات */
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* url() -- إدراج صورة ايقونة */
.external-link::after {
    content: url('data:image/svg+xml,...');
    margin-left: 4px;
    vertical-align: middle;
}

/* counter() -- ترقيم الاقسام تلقائيا */
body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: 'القسم ' counter(section) ': ';
    color: #3498db;
    font-weight: normal;
}

/* open-quote و close-quote */
blockquote {
    quotes: '\201C' '\201D' '\2018' '\2019';
}

blockquote::before {
    content: open-quote;
    font-size: 2em;
    color: #ccc;
    line-height: 0;
    vertical-align: -0.4em;
}

blockquote::after {
    content: close-quote;
    font-size: 2em;
    color: #ccc;
    line-height: 0;
    vertical-align: -0.4em;
}

/* الدمج -- الجمع بين عدة قيم */
.price::before {
    content: '$';
}

.chapter::before {
    counter-increment: chapter;
    content: 'الفصل ' counter(chapter) ' -- ';
    font-weight: bold;
}

حالات الاستخدام الزخرفية لـ ::before و ::after

الاستخدام الاكثر شيوعا لـ ::before و ::after هو اضافة عناصر زخرفية دون تشويش HTML. يمكن تنسيق هذه العناصر الزائفة بأي خاصية CSS -- وضعها بشكل مطلق واعطاؤها خلفيات وحدود وتدرجات وحتى رسوم متحركة.

/* خط زخرفي تحت العناوين */
h2 {
    position: relative;
    padding-bottom: 12px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #3498db, #2ecc71);
    border-radius: 2px;
}

/* ايقونة اقتباس قبل الاقتباسات */
blockquote {
    position: relative;
    padding-left: 40px;
}

blockquote::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 4em;
    color: rgba(52, 152, 219, 0.3);
    font-family: Georgia, serif;
    line-height: 1;
}

/* شارة شريط على البطاقات */
.featured-card {
    position: relative;
    overflow: hidden;
}

.featured-card::before {
    content: 'مميز';
    position: absolute;
    top: 15px;
    right: -35px;
    background-color: #e74c3c;
    color: white;
    padding: 4px 40px;
    font-size: 0.75rem;
    font-weight: bold;
    transform: rotate(45deg);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* تراكب عند التمرير لبطاقات الصور */
.image-card {
    position: relative;
    overflow: hidden;
}

.image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0) 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-card:hover::after {
    opacity: 1;
}

/* نقاط تعداد مخصصة */
.custom-list li {
    position: relative;
    padding-left: 24px;
    list-style: none;
}

.custom-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border-radius: 50%;
}

/* مؤشرات الخطوات */
.step {
    position: relative;
    padding-left: 50px;
}

.step::before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    background-color: #3498db;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

تقنية Clearfix

احد الاستخدامات الكلاسيكية لـ ::after هو حيلة clearfix -- تقنية لجعل الحاوية الاصلية تحتوي بشكل صحيح على عناصرها الفرعية العائمة. بينما حلت طرق تخطيط CSS الحديثة (Flexbox و Grid) محل الحاجة للعناصر العائمة الى حد كبير، ستظل تصادف clearfix في قواعد الكود القديمة.

/* تقنية clearfix */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* الاستخدام في HTML:
<div class="clearfix">
    <div style="float: left; width: 50%;">العمود الايسر</div>
    <div style="float: right; width: 50%;">العمود الايمن</div>
</div>
*/

/* البديل الحديث: استخدم ببساطة overflow او display: flow-root */
.parent {
    display: flow-root; /* clearfix حديث -- لا حاجة لعنصر زائف */
}

إدراج الايقونات مع ::before و ::after

تُستخدم العناصر الزائفة بشكل متكرر لإدراج ايقونات قبل او بعد عناصر النص، خاصة عند استخدام خطوط الايقونات مثل Font Awesome او حروف Unicode المخصصة.

/* ايقونات اسهم Unicode */
.link-forward::after {
    content: ' \2192'; /* سهم يمين: ← */
}

.link-back::before {
    content: '\2190 '; /* سهم يسار: → */
}

.link-external::after {
    content: ' \2197'; /* سهم شمال شرق: ↗ */
    font-size: 0.8em;
}

/* ايقونة علامة صح */
.checkmark::before {
    content: '\2713'; /* علامة صح: ✓ */
    color: #2ecc71;
    margin-right: 8px;
    font-weight: bold;
}

/* ايقونة تحذير */
.warning-text::before {
    content: '\26A0'; /* علامة تحذير: ⚠ */
    margin-right: 8px;
    color: #f39c12;
}

/* ايقونات Font Awesome (عند استخدام الخط) */
.fa-icon::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 8px;
}

.fa-icon.email::before {
    content: '\f0e0'; /* ايقونة المغلف */
}

.fa-icon.phone::before {
    content: '\f095'; /* ايقونة الهاتف */
}

::first-line -- تنسيق السطر الاول

يستهدف العنصر الزائف ::first-line السطر الاول المعروض من عنصر على مستوى الكتلة. هذا تحديد ديناميكي -- إذا تم تغيير حجم نافذة المتصفح واعادة تدفق النص، يتكيف التنسيق تلقائيا مع النص الذي يظهر الآن على السطر الاول.

يمكن تطبيق مجموعة محدودة فقط من خصائص CSS على ::first-line:

• خصائص الخط: font-family و font-size و font-weight و font-style و font-variant
• خصائص اللون والخلفية
• text-decoration و text-transform و letter-spacing و word-spacing
• line-height
• vertical-align

/* سطر اول بنمط المجلات */
article p:first-of-type::first-line {
    font-weight: 700;
    font-size: 1.1em;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* السطر الاول بلون مختلف */
.lead-paragraph::first-line {
    color: #3498db;
    font-weight: 600;
}

/* السطر الافتتاحي لمقال اخباري */
.news-body p:first-child::first-line {
    font-variant: small-caps;
    font-size: 1.15em;
}

::first-letter -- الاحرف الاستهلالية الكبيرة والحروف الاولى

يستهدف العنصر الزائف ::first-letter الحرف الاول من عنصر على مستوى الكتلة. هذه هي الطريقة الكلاسيكية لإنشاء الاحرف الاستهلالية الكبيرة -- الاحرف الاولى الزخرفية الكبيرة التي تراها في الكتب والمجلات والمواقع التحريرية.

مثل ::first-line، يقبل ::first-letter مجموعة محدودة من الخصائص، لكنه يدعم ايضا margin و padding و border و float -- وهذا ما يجعل الاحرف الاستهلالية الكبيرة ممكنة.

/* حرف استهلالي كبير كلاسيكي */
article p:first-of-type::first-letter {
    font-size: 3.5em;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin-right: 8px;
    margin-top: 4px;
    color: #2c3e50;
    font-family: Georgia, 'Times New Roman', serif;
}

/* حرف استهلالي ملون مع خلفية */
.fancy-article p:first-child::first-letter {
    font-size: 4em;
    float: left;
    line-height: 0.7;
    margin-right: 12px;
    margin-top: 6px;
    padding: 8px 12px;
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* حرف استهلالي بحد زخرفي */
.editorial p:first-of-type::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 10px;
    margin-top: 2px;
    line-height: 0.85;
    border-bottom: 3px solid #e74c3c;
    padding-bottom: 4px;
    color: #e74c3c;
    font-family: 'Playfair Display', serif;
}

/* حرف اول مكبر بسيط (بدون float) */
.intro-text::first-letter {
    font-size: 1.5em;
    font-weight: 700;
    color: #3498db;
}

::selection -- تخصيص تمييز النص

يُنسق العنصر الزائف ::selection جزء النص الذي حدده (ظلله) المستخدم بمؤشره. يتيح لك تخصيص لون التمييز ليتطابق مع تصميم موقعك.

تعمل خصائص قليلة فقط مع ::selection:

• color
• background-color (او background)
• text-decoration
• text-shadow
• -webkit-text-stroke (في بعض المتصفحات)

/* لون التحديد العام */
::selection {
    background-color: #3498db;
    color: white;
}

/* خاص بفايرفوكس (الاصدارات القديمة) */
::-moz-selection {
    background-color: #3498db;
    color: white;
}

/* تحديد مختلف لكتل الكود */
pre::selection,
code::selection {
    background-color: #2c3e50;
    color: #2ecc71;
}

/* تحديد بلون العلامة التجارية */
.brand-section ::selection {
    background-color: #f39c12;
    color: #2c3e50;
}

/* تحديد خفيف */
.minimal ::selection {
    background-color: rgba(52, 152, 219, 0.2);
    color: inherit;
}

::placeholder -- تنسيق نص العنصر النائب في النماذج

يُنسق العنصر الزائف ::placeholder النص النائب المعروض في عناصر <input> و <textarea> عندما تكون فارغة. بشكل افتراضي، يُعرض النص النائب عادة بلون افتح، لكن يمكنك تخصيصه ليتطابق مع نظام تصميمك.

/* تنسيق العنصر النائب العام */
::placeholder {
    color: #95a5a6;
    font-style: italic;
    opacity: 1; /* فايرفوكس يستخدم شفافية اقل افتراضيا */
}

/* عنصر نائب لحقل ادخال محدد */
.search-input::placeholder {
    color: #bdc3c7;
    font-size: 0.95em;
}

/* العنصر النائب يتغير عند التركيز */
input:focus::placeholder {
    color: transparent;
    transition: color 0.3s ease;
}

/* عنصر نائب مع ايقونة (باستخدام حرف خاص) */
.search-box::placeholder {
    color: #aaa;
}

/* عنصر نائب للسمة الداكنة */
.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

::marker -- تنسيق نقاط وارقام القوائم

يستهدف العنصر الزائف ::marker النقطة او الرقم او العلامة الاخرى لعنصر القائمة (<li>). قبل وجود ::marker، كان تخصيص نقاط القائمة يتطلب حلولا بديلة مع ::before وازالة list-style الافتراضي. الآن يمكنك تنسيق العلامة مباشرة.

تشمل الخصائص التي تعمل مع ::marker:

• color
• جميع خصائص font
• content
• white-space
• خصائص animation و transition
• direction و unicode-bidi و text-combine-upright

/* نقاط تعداد ملونة */
li::marker {
    color: #3498db;
    font-size: 1.2em;
}

/* علامات ايموجي مخصصة */
.feature-list li::marker {
    content: '\2713  '; /* علامة صح */
    color: #2ecc71;
}

.warning-list li::marker {
    content: '\26A0  '; /* علامة تحذير */
    color: #f39c12;
}

.info-list li::marker {
    content: '\2139  '; /* رمز معلومات */
    color: #3498db;
}

/* قائمة مرقمة بتنسيق مخصص */
ol li::marker {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.1em;
}

/* علامة متحركة عند التمرير */
li:hover::marker {
    color: #e74c3c;
    transition: color 0.3s ease;
}

/* علامات مختلفة للقوائم المتداخلة */
ul ul li::marker {
    content: '\2022  '; /* نقطة صغيرة */
    color: #7f8c8d;
    font-size: 0.8em;
}

عدادات CSS بالتفصيل

عدادات CSS هي متغيرات يديرها CSS يمكن زيادتها وإعادة تعيينها وعرضها باستخدام خاصية content. إنها مفيدة بشكل لا يصدق مع ::before و ::after لإنشاء انظمة ترقيم تلقائية بدون اي JavaScript او تعديل HTML.

/* ترقيم الاقسام الاساسي */
body {
    counter-reset: section;
}

h2 {
    counter-increment: section;
    counter-reset: subsection;
}

h2::before {
    content: counter(section) '. ';
    color: #3498db;
}

/* ترقيم متداخل (1.1، 1.2، 2.1، الخ.) */
h3 {
    counter-increment: subsection;
}

h3::before {
    content: counter(section) '.' counter(subsection) ' ';
    color: #7f8c8d;
}

/* قائمة مرتبة مخصصة بالعدادات */
.custom-ol {
    list-style: none;
    counter-reset: item;
    padding-left: 0;
}

.custom-ol li {
    counter-increment: item;
    padding-left: 40px;
    position: relative;
    margin-bottom: 12px;
}

.custom-ol li::before {
    content: counter(item, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #3498db;
    font-size: 1.2em;
}

/* عداد خطوات بدوائر */
.steps {
    counter-reset: step;
}

.step-item {
    counter-increment: step;
    position: relative;
    padding-left: 60px;
    margin-bottom: 24px;
}

.step-item::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background-color: #3498db;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}

/* عداد الاسئلة الشائعة */
.faq {
    counter-reset: question;
}

.faq-item {
    counter-increment: question;
}

.faq-item .question::before {
    content: 'س' counter(question) ': ';
    font-weight: bold;
    color: #e74c3c;
}

الجمع بين العناصر الزائفة والفئات الزائفة

واحدة من اقوى التقنيات في CSS هي الجمع بين العناصر الزائفة والفئات الزائفة. يتيح لك هذا إنشاء محتوى عنصر زائف يستجيب لتفاعل المستخدم او حالة العنصر او بنية المستند.

/* إظهار تلميح عند التمرير باستخدام ::after */
.tooltip {
    position: relative;
    cursor: help;
}

.tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

.tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2c3e50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* خط تحتي متحرك عند التمرير */
.fancy-link {
    position: relative;
    text-decoration: none;
    color: #2c3e50;
}

.fancy-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #3498db;
    transition: width 0.3s ease;
}

.fancy-link:hover::after {
    width: 100%;
}

/* زر بخلفية منزلقة عند التمرير */
.slide-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
    padding: 12px 32px;
    transition: color 0.4s ease;
}

.slide-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #3498db;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.slide-btn:hover {
    color: white;
}

.slide-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* حلقة تركيز باستخدام العناصر الزائفة */
.focus-ring {
    position: relative;
}

.focus-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.2s ease;
    pointer-events: none;
}

.focus-ring:focus-visible::after {
    border-color: #3498db;
}

/* بنيوي + عنصر زائف: اول مقال بحرف استهلالي كبير */
article:first-of-type p:first-child::first-letter {
    font-size: 3em;
    float: left;
    line-height: 0.8;
    margin-right: 8px;
    color: #2c3e50;
    font-family: Georgia, serif;
}

/* nth-child + ::before لخطوات مرقمة */
.step-list li:nth-child(1)::before { content: '\2776'; }
.step-list li:nth-child(2)::before { content: '\2777'; }
.step-list li:nth-child(3)::before { content: '\2778'; }
.step-list li:nth-child(4)::before { content: '\2779'; }
.step-list li:nth-child(5)::before { content: '\277A'; }

انماط وتقنيات من العالم الحقيقي

دعنا نلقي نظرة على بعض الانماط الكاملة الجاهزة للإنتاج التي تجمع كل ما تعلمناه عن العناصر الزائفة.

/* 1. فاصل مسار التنقل */
.breadcrumb li + li::before {
    content: '/';
    color: #bdc3c7;
    margin: 0 8px;
}

/* 2. مكون العلامة/الشارة */
.tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: #eaf2f8;
    color: #3498db;
    border-radius: 4px;
    font-size: 0.85rem;
    position: relative;
}

.tag.removable::after {
    content: '\00D7';
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.6;
}

.tag.removable:hover::after {
    opacity: 1;
    color: #e74c3c;
}

/* 3. شريط زاوية البطاقة */
.ribbon-card {
    position: relative;
    overflow: hidden;
}

.ribbon-card::before {
    content: 'جديد';
    position: absolute;
    top: 20px;
    left: -30px;
    width: 120px;
    text-align: center;
    padding: 4px 0;
    background-color: #2ecc71;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 4. فاصل بنص */
.text-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.text-divider::before,
.text-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #ddd;
}

.text-divider::before {
    margin-right: 16px;
}

.text-divider::after {
    margin-left: 16px;
}

/* 5. حاوية نسبة العرض الى الارتفاع */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
}

.aspect-ratio-16-9::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 9/16 = 0.5625 */
}

.aspect-ratio-16-9 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 6. هيكل التحميل */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
    border-radius: 4px;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

الملخص

في هذا الدرس اتقنت عناصر CSS الزائفة والمحتوى المُولّد. إليك النقاط الرئيسية:

• العناصر الزائفة تستخدم صيغة النقطتين المزدوجتين (::) وتستهدف اجزاء فرعية افتراضية من العناصر او تنشئ عناصر افتراضية جديدة.
• ::before و ::after هما العنصران الزائفان الاكثر استخداما. يتطلبان خاصية content ومثاليان للعناصر الزخرفية والايقونات والتراكبات و clearfix والمزيد.
• خاصية content تقبل السلاسل النصية و attr() و url() و counter() و open-quote/close-quote ومجموعات منها.
• ::first-line ينسق السطر الاول المعروض ديناميكيا وهو رائع لطباعة التحرير.
• ::first-letter يمكّن الاحرف الاستهلالية الكبيرة والحروف الاولى الزخرفية -- عنصر اساسي في تصميم المجلات والتحرير.
• ::selection يتيح لك تخصيص لون تمييز النص ليتطابق مع علامتك التجارية.
• ::placeholder ينسق نص العنصر النائب لحقول الادخال في النماذج، لكن تذكر ان العناصر النائبة ليست بدائل للتسميات.
• ::marker يوفر تحكما مباشرا في تنسيق نقاط وارقام القوائم بدون حلول بديلة.
• عدادات CSS (counter-reset و counter-increment و counter()) تمكن انظمة ترقيم تلقائية مع العناصر الزائفة.
• يمكن الجمع بين العناصر الزائفة والفئات الزائفة (مثل :hover::after) لتأثيرات بصرية تفاعلية.
• تذكر دائما ان محتوى العنصر الزائف ليس في DOM ولا ينبغي ان يحتوي على معلومات ذات معنى ضرورية لإمكانية الوصول.