CSS/content

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

/* كلمات محجوزة لا يمكن دمجها مع بقية القيم */
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;

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

أمثلة

مثال على إضافة علامات اقتباس حول العنصر <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
    lucky enough to invent the Web at the time when the Internet
    already existed - and had for a decade and a half.</q>
  We must understand that there is nothing fundamentally wrong
  with building on the contributions of others.
</p>

<h1>6</h1>
<p>According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
    must have the ability to shape the Internet and
    their own experiences on the Internet.</q>
  Therefore, we can infer that contributing to the open web
  can protect our own individual experiences on it.
</p>

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

q {
  color: blue;
}

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

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

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

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

<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>    
  <li class="new-entry">Vampire</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>

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

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