text-decoration

خاصية زخرفة النص text-decoration

خاصية text-decoration ترسم خطوط النص: تسطير الروابط، شطب الأسعار — وأخواتها الحديثة تضبط لون الخط وسمكه وبعده.

أشهر استخدامين: تسطير الروابط underline (وإزالته none — لكن انتبه: رابط وسط فقرة بلا تسطير يميّزه اللون وحده، وهذه ملاحظة وصولية يرصدها Lighthouse فعلًا)، وشطب الأسعار القديمة line-through (مع تفضيل وسم del الدلالي).

العائلة الحديثة ترقّي الجماليات: text-decoration-color لخط بلون مغاير، وthickness للسمك، وtext-underline-offset لإنزال الخط تحت الحروف — الأخيرة **هدية للعربية** حيث يتقاطع التسطير الافتراضي مع النازل من الحروف.

الصياغة

a {
  text-decoration: underline;
  text-underline-offset: 3px; /* نجاة الحروف العربية النازلة */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>.d p { margin: 6px 0; font-size: 17px; }</style>
<div class="d">
  <p style="text-decoration:underline">تسطير افتراضي يلامس النازل: يجري، بحرية</p>
  <p style="text-decoration:underline; text-underline-offset:4px; text-decoration-color:#7c5cff">مع offset ولون: يجري، بحرية — نظافة كاملة</p>
  <p style="text-decoration:line-through; color:#999">سعر قديم مشطوب</p>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
underline / none	تسطير وإزالته — قرار الروابط الأزلي
line-through	شطب — والأصح دلاليًا وسم del للأسعار
text-underline-offset	إنزال الخط — منقذ الحروف العربية النازلة
color / thickness / style	لون وسمك ونمط الخط (متموج للأخطاء الإملائية)

💡 نصائح عملية

وصفة روابط عربية أنيقة: underline + offset 3-4px + لون أفتح من النص
أزلت تسطير روابط النصوص؟ عوّض بمؤشر ثانٍ غير اللون — التزام وصولية

⚠️ أخطاء شائعة

تسطير افتراضي يقطع «ج» و«ي» العربية — offset يحل بسطر
underline لنص غير رابط — القارئ سيضغطه ويحبَط

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs