وثائق CSS قابلة للتشغيل: التسطير في CSS

Q: كيف أضع خطًا تحت النص في CSS؟

استخدم text-decoration: underline; على العنصر. ولمظهر الخط أضف text-decoration-color وtext-decoration-style وtext-decoration-thickness وtext-underline-offset.

Q: كيف أزيل الخط من تحت الرابط؟

اضبط text-decoration: none; على العنصر a. تأكد أن الروابط ما زالت بارزة بطريقة أخرى (لون، إضافةً إلى خط عند التمرير أو التركيز)، لأن كثيرًا من القراء يعتمدون على الخط لتمييز الروابط.

Q: كيف أغيّر لون خط التسطير؟

استخدم text-decoration-color، أو الاختصار: text-decoration: underline #f59e0b;. من دونه يستخدم الخط لون النص.

Q: كيف أضيف مسافة بين النص والخط الذي تحته؟

استخدم text-underline-offset، مثلًا text-underline-offset: 4px;. القيم الأكبر تبعد الخط أكثر تحت النص.

التسطير في CSS: text-decoration واللون والإزاحة والإزالة

سطّر النص بـ text-decoration، ثم تحكم في الخط: لونه ونمطه وسماكته وبعده عن النص. وأيضًا كيف تزيل الخط من تحت الروابط، ومتى يجب ألا تفعل ذلك.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تسطّر النص في CSS

ترسم text-decoration: underline خطًا تحت النص. يأخذ الخط لون النص ما لم تعطه لونًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

يستخدم السطر الثاني الاختصار text-decoration لنوع الخط ونمطه ولونه، ثم يضبط السماكة والإزاحة بخاصيتيهما. تسمح المواصفة أيضًا بوضع السماكة داخل الاختصار، لكن Safari يُسقط التصريح كله حين تضعها، لذلك اكتب text-decoration-thickness منفصلة.

خصائص text-decoration

الخاصية	القيم	الافتراضي
`text-decoration-line`	`underline`، `overline`، `line-through`، `none` (يمكن الجمع بينها)	`none`
`text-decoration-style`	`solid`، `double`، `dotted`، `dashed`، `wavy`	`solid`
`text-decoration-color`	أي لون	`currentColor` (لون النص)
`text-decoration-thickness`	طول، نسبة مئوية، `auto`، `from-font`	`auto`
`text-underline-offset`	طول، نسبة مئوية، `auto`	`auto`

text-decoration هي الاختصار للخصائص الأربع الأولى، لكن أبقِ السماكة خارجه: يتجاهل Safari تصريح text-decoration الذي يحتوي عليها. أما text-underline-offset فمنفصلة ويجب كتابتها وحدها.

الأنماط والألوان والسماكة

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

تحريك الخط: text-underline-offset

افتراضيًا يقع الخط قريبًا من الحروف ويتجاوز الأجزاء النازلة مثل g وp وy. تدفعه text-underline-offset إلى الأسفل أكثر، وهذا غالبًا أوضح في العناوين والروابط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

الفجوات حول الأجزاء النازلة تأتي من text-decoration-skip-ink: auto، المفعّلة افتراضيًا. اضبطها على none لخط متصل.

إزالة الخط من تحت الروابط

يسطّر ملف أنماط المتصفح الروابط. text-decoration: none تزيل الخط. ولأن كثيرًا من القراء يجدون الروابط بخطها، أعِده عند التمرير وتركيز لوحة المفاتيح، وأعطِ الرابط لونًا مختلفًا عن النص:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

أشرطة التنقل والأزرار مكان مقبول لإزالة الخط، لأن موضعها يقول «رابط» أصلًا. أما داخل فقرة نصية فأبقِه. المزيد عن حالات الروابط في صفحة hover.

الخط العلوي والخط الذي يتوسط النص

ترسم text-decoration-line أيضًا خطًا فوق النص أو عبره، وتقبل أكثر من قيمة:

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

الشطب عبر CSS بصري فقط. حين يكون النص محتوى محذوفًا (سعر تغيّر، عنصر أزيل)، ضعه في <s> أو <del>، كما تعرض صفحة التسطير في HTML، كي يكون المعنى في الوسوم لا في التنسيق وحده.

أخطاء شائعة

استخدام <u> للتسطير كتنسيق. <u> للنص المميز بأنه مختلف، مثل الأخطاء الإملائية. للتسطير المنسق استخدم CSS.
تسطير نص ليس رابطًا. سيحاول القراء النقر عليه. استخدم الخط العريض أو اللون أو الخلفية للتأكيد بدلًا من ذلك.
إزالة خط الروابط داخل نص الجسم من دون إشارة أخرى. اللون وحده لا يكفي للقراء الذين لا يرون الفرق.
محاولة إزالة تسطير الأب من الابن. لا يمكن إلغاؤه من الداخل؛ غيّر الأب أو اجعل الابن inline-block.
توقع وجود text-underline-offset في الاختصار. إنها خاصية مستقلة.
وضع السماكة في الاختصار. تعمل text-decoration: underline 2px في Chrome وFirefox، لكن Safari يُسقط التصريح كله. استخدم text-decoration-thickness.

الأسئلة الشائعة

كيف أضع خطًا تحت النص في CSS؟

استخدم text-decoration: underline; على العنصر. ولمظهر الخط أضف text-decoration-color وtext-decoration-style وtext-decoration-thickness وtext-underline-offset.

كيف أزيل الخط من تحت الرابط؟

اضبط text-decoration: none; على العنصر a. تأكد أن الروابط ما زالت بارزة بطريقة أخرى (لون، إضافةً إلى خط عند التمرير أو التركيز)، لأن كثيرًا من القراء يعتمدون على الخط لتمييز الروابط.

كيف أغيّر لون خط التسطير؟

استخدم text-decoration-color، أو الاختصار: text-decoration: underline #f59e0b;. من دونه يستخدم الخط لون النص.

كيف أضيف مسافة بين النص والخط الذي تحته؟

استخدم text-underline-offset، مثلًا text-underline-offset: 4px;. القيم الأكبر تبعد الخط أكثر تحت النص.

لماذا لا أستطيع إزالة التسطير من عنصر ابن؟

التسطير الذي يرسمه الأب يُطلى عبر أبنائه ولا يمكن إزالته من داخلهم. أزِله من العنصر الذي يضبطه، أو اجعل الابن display: inline-block، فزخرفة الأب لا تصل إليه.

مفاهيم ذات صلة