CSS/text-decoration-line

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

/* الكلمات المحجوزة */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline;               /* استخدام خطَيّ زخرفة */
text-decoration-line: overline underline line-through;  /* استخدام عدِّة خطوط زخرفة */

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

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

أمثلة

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

<p class="wavy">هذا نصٌ تحته خطٌ أحمر مموج.</p>
<p class="both">لهذا النص خطوطٌ فوقه وتحته.</p>

شيفرة CSS:

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

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

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

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

تقبل الخاصية text-decoration-line الكلمة المحجوزة none (التي تعني عدم استخدام زخرفة للنص)، أو قيمةً واحدةً أو أكثر من الكلمات المحجوزة الآتية التي يُفصَل بينها بفراغ.

القيمة underline

سيوضع خط الزخرفة تحت النص.

القيمة overline

سيوضع خط الزخرفة فوق النص.

القيمة line-through

سيمر خط الزخرفة ضمن النص.

القيمة blink

سيومض النص، لكن هذه الخاصية مهملة بسبب تفضيل استخدام الحركات في CSS عليها.

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

text-decoration-line: none | [ underline || overline || line-through || blink ];

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

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