الخاصية text-decoration-color

الخاصية text-decoration-color في CSS تُحدِّد لون خطوط الزخرفة (decorative lines) المستخدمة على النص والمضبوطة عبر الخاصية text-decoration-line؛ وهذا يتضمن الأسطر التي تعلو الخط أو تظهر أدناه أو تمر عبره أو الخطوط المموجة (التي تُشير عادةً إلى أنَّ الكلام فيه خطأ إملائي على سبيل المثال)؛ وسيُطبَّق اللون المضبوط عبر هذه الخاصية على جميع خطوط الزخرفة المُحدَّدة على العنصر.

إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة text-decoration.

/* <color> قيم لونية */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* قيم عامة */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

لا توفِّر CSS طريقةً مباشرةً لتحديد لون فريد لكل خط زخرفة مُطبَّق على العنصر، لكن يمكن فعل ذلك باستخدام أكثر من عنصر HTML وبتطبيق نوع خط مختلف على كل عنصر (باستخدام الخاصية text-decoration-line) وتحديد لون الخط (عبر text-decoration-color) لكل عنصر على حدة.

القيمة الابتدائية	currentcolor
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	قيمة لونية <color>.

أمثلة

مثال على استخدام الخاصية text-decoration-color مع الخاصيات text-decoration-line و text-decoration-style على عنصر <p> وعنصر <s> موجود داخله:

<p>في هذه الفقرة <s>بعض الأخطااء الإملائية</s> التي نريد الإشارة إليها.</p>

شيفرة CSS:

p { 
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57	36.0	غير مدعومة	44	7.1 مع السابقة -webkit-

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

تقبل الخاصية text-decoration-color قيمةً لونيةً وحيدةً.

القيمة <color>

ضبط لون الزخرفة.

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

text-decoration-color: <color>;

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

• مواصفة CSS Text Decoration Module Level 3، أصبحت الخاصية text-decoration خاصيةً مختصرةً.