عرض مصدر CSS/text-decoration-line

<noinclude>{{DISPLAYTITLE:الخاصية <code>text-decoration-line</code>}}</noinclude>
الخاصية <code>text-decoration-line</code> في CSS تُحدِّد نوع خطوط الزخرفة (decorative lines) المستخدمة على النص. إذا كنت ستضبط عدِّة خاصيات لتحديد شكل خطوط الزخرفة، فمن المستحسن حينئذٍ استخدام الخاصية المختصرة <code>[[CSS/text-decoration|text-decoration]]</code>.<syntaxhighlight lang="css">
/* الكلمات المحجوزة */
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;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

== أمثلة ==
مثال على استخدام الخاصية <code>text-decoration-line</code> مع الخاصيات <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-decoration-style|text-decoration-style]]</code> على عنصرَي <code>[[HTML/p|<nowiki><p></nowiki>]]</code> لإضافة خطوط زخرفة للنص الموجود داخلهما:<syntaxhighlight lang="html">
<p class="wavy">هذا نصٌ تحته خطٌ أحمر مموج.</p>
<p class="both">لهذا النص خطوطٌ فوقه وتحته.</p>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|57
|36.0
|غير مدعومة
|44
|7.1 مع السابقة <code>-webkit-</code>
|}
== البنية العامة ==
تقبل الخاصية <code>text-decoration-line</code> الكلمة المحجوزة <code>none</code> (التي تعني عدم استخدام زخرفة للنص)، أو قيمةً واحدةً أو أكثر من الكلمات المحجوزة الآتية التي يُفصَل بينها بفراغ.
=== القيمة <code>underline</code> ===
سيوضع خط الزخرفة تحت النص.
=== القيمة <code>overline</code> ===
سيوضع خط الزخرفة فوق النص.
=== القيمة <code>line-through</code> ===
سيمر خط الزخرفة ضمن النص.
=== القيمة <code>blink</code> ===
سيومض النص، لكن هذه الخاصية مهملة بسبب تفضيل استخدام [[CSS/animation|الحركات]] في CSS عليها.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
text-decoration-line: none | [ underline || overline || line-through || blink ];

</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-text-decor-3/#text-decoration-line CSS Text Decoration Module Level 3]، أصبحت الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> خاصيةً مختصرةً. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Text Decoration|{{SUBPAGENAME}}]]