شرح صفوف ومحتوى الفقرة
ينشئ العنصران الزائفان ::before و::after صندوقين افتراضيين باعتبارهما الابن الأول والابن الأخير داخل العنصر المستهدف. ولا يُرسم أي منهما في التخطيط ما لم تصرح بخاصية content؛ إذ يؤدي إغفالها أو إعطاؤها القيمة content: none إلى عدم توليد الصندوق من الأساس.
عند رسم زخارف هندسية خالصة مثل النقاط الملونة للحالة أو الخطوط التزيينية تحت العناوين، نكتب نصاً فارغاً content: "" ثم نمنحه أبعاداً ولون خلفية مع display: inline-block أو تموضع مطلق. وانتبه إلى أن العناصر المستبدلة أو الفارغة مثل <img> و<input> و<br> لا تملك حاوية محتوى داخلية، لذا لا يعمل عليها ::before ولا ::after.
CSS
.status-chip::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-inline-end: 8px;
border-radius: 50%;
background-color: #10b981;
}