شرح صفوف ومحتوى الفقرة
بدلاً من تثبيت كلمات جامدة داخل ملف الأنماط، تقرأ دالة content: attr(data-badge) قيمة السمة المكتوبة على وسم HTML وتعرضها بصرياً، كما يمكنك دمج نصوص ثابتة مع قيمة السمة في سطر واحد تفصل بينها مسافات مثل content: " [" attr(data-lang) "]".
وفي الاقتباسات النصية بوسم <q> أو بطاقات الاستشهاد، يتيح الجمع بين خاصية quotes وقيمتي open-quote وclose-quote مطابقة علامات التنصيص للغة المحتوى تلقائياً، فتظهر علامات التنصيص الإنجليزية المنحنية في النصوص اللاتينية وتظهر الشوكتان العربيتان المزدوجتان «...» في النصوص العربية.
CSS
.doc-card::after {
content: attr(data-badge);
padding: 2px 8px;
background-color: #f2ebf9;
}
.quote-box { quotes: "«" "»"; }
.quote-box::before { content: open-quote; }
.quote-box::after { content: close-quote; }