CSS/content

الخاصية content في CSS تُستخدَم مع العنصرين الزائفين ‎::before و ‎::after لتوليد محتوى في العنصر.

بطاقة الخاصية

القيمة الابتدائية	normal
تُطبَّق على	العنصرين الزائفين ‎::before و ‎::after.
قابلة للوراثة	لا
قابلة للحركة	لا
القيمة المحسوبة	ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية. وإذا كانت القيمة normal وطُبِّقَت على العنصرين الزائفين ‎::before و ‎::after فستكون القيمة المحسوبة هي none. إذا استخدمنا روابط URL النسبية فستحوِّل إلى روابط مطلقة. إذا استخدمنا الدالة attr(x)‎ فستحوِّل القيمة إلى سلسلة نصية. فيما عدا ذلك، ستكون القيمة المحسوبة هي نفس القيمة المُحدَّدة.

/* كلمات محجوزة لا يمكن دمجها مع بقية القيم */
content: normal;
content: none;

/* <string> سلاسل نصية */
content: "prefix";

/* <url> روابط */
content: url("http://www.example.com/test.png");

/* <counter> قيم */
content: counter(chapter_counter);
content: counters(section_counter, ".");

/* attr() HTML استخدام قيم خاصيات */
content: attr(value string);

/* كلمات محجوزة يختلف أثرها حسب الموضع أو اللغة */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* يمكن استخدام أكثر من قيمة معًا */
content: open-quote chapter_counter;

/* القيم العامة */
content: inherit;
content: initial;
content: unset;

أمثلة

مثال على إضافة علامات اقتباس حول العنصر <q> وإضافة الكلمة Chapter قبل الترويسات:

<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
   حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>

<h1>6</h1>
<p>According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
   حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>

شيفرة CSS، لاحظ وجود فراغ بعد الكلمة Chapter لإضافة فاصل بينها وبين محتوى العنصر <h1>:

q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before  {
  content: "Chapter ";
}

هذا المثال سيضع نصًا إضافيًا بعد عناصر خاصة في القائمة:

<h2>في مهمة لتطوير العالم العربي</h2>
<ol>
  <li>مستقل</li>
  <li class="new-entry">خمسات</li>
  <li>إعلانات حسوب</li>    
  <li class="new-entry">أكاديمية حسوب</li>
</ol>

شيفرة CSS، لاحظ وجود فراغ قبل الكلمة New لفصلها عمّا قبله من المحتوى:

.new-entry::after {
  content: " New!";
  color: red;
}

أما هذا المثال فسيضيف صورةً قبل كل رابط، ويضع قيمة الخاصية id بعده:

<ul>
  <li><a id="link1" href="http://example.com/">
    example.com</a></li>
  <li><a id="link2" href="https://example.org/">
    example.org</a></li>
</ul>

شيفرة CSS:

a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#link1::before {
  content: url("favicon.ico") ;
}

#link2::before {
  content: url("image.png") ;
}

li {
  margin: 1em;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	8.0	7.0	1.0

البنية العامة

الخاصية content تقبل القيم الآتية.

none

لن يولّد عنصرٌ زائف (pseudo-element).

normal

هذه القيمة ستحوّل إلى none في العنصرين الزائفين ‎::before و ‎::after.

<string>

سلسلة نصية تحتوي على محرف أو أكثر.

<url>

يُشير رابط URL إلى مورد خارجي (مثل الصور)، وإذا لم يمكن المتصفح من عرض ذاك المورد، فإما أن سيتجاهله أو سيعرض محتوى بديل عنه.

<counter>

قيمة عداد في CSS، ويكون عادةً رقميًا، ويمكن عرضه باستخدام الدالة counter()‎ أو الدالة counters()‎.

attr(x)‎

استخدام قيمة الخاصية x كسلسلة نصية، وإذا لم تكن تلك الخاصية موجودةً فستُعاد سلسلة نصية فارغة.

open-quote أو close-quote

ستُستبدَل هاتان القيمتان بما يناسبهما من السلاسل النصية المضبوطة في الخاصية quotes.

no-open-quote أو no-close-quote

لن تؤدي هاتان القيمتان إلى عرض علامات اقتباس، لكنهما ستؤديان إلى زيادة مستوى الاقتباس (level of nesting) في العنصر (انظر صفحة الخاصية quotes للتفاصيل).

البنية الرسمية

content: normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?;

حيث:

<content-replacement> = <image>

انظر أيضًا

• صفحة الخاصية  ::after التي تستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
• صفحة الخاصية  ::before التي تستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
• صفحة الخاصية  quotes التي تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

مصادر ومواصفات

• مسودة CSS Generated Content Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.