خاصية text-underline-offset
آخر تحديث: 2026-09-13
text-underline-offset خاصية text-underline-offset
تحدد خاصية text-underline-offset في CSS المسافة بين التسطير والخط الأساسي للنص، مما يجعل موضع التسطير أكثر مرونة وأناقة. افتراضيًا يلتصق التسطير بأسفل النص؛ ويترك الإزاحة فجوة بحيث لا يصطدم الخط مع الأجزاء الهابطة مثل g وy.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
text-underline-offset: auto | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | الإزاحة الافتراضية |
<length> | <percentage> | النوع | مسافة إزاحة التسطير كطول أو نسبة مئوية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-underline-offset | ✓ v66 | ✓ v79 | ✓ v62 | ✓ v12.1 | ✓ v53 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤثر text-underline-offset فقط في موضع التسطير السفلي؛ ولا تمس الخطوط العلوية أو المتوسط المشطوب.
تحذير： يتطلب إصدارات متصفحات حديثة نسبيًا (Chrome 66+ وFirefox 62+ وSafari 12.1+)؛ وتتجاهل المتصفحات القديمة الخاصية.
❓ الأسئلة الشائعة
Qما الفرق بين text-underline-offset وtext-decoration-thickness؟
Aيتحكم text-underline-offset في المسافة بين التسطير والنص، بينما يتحكم text-decoration-thickness في سمك التسطير. يكمل أحدهما الآخر ويمكن دمجهما لتنسيق تسطير أدق.
Qعلامة النسبة المئوية في text-underline-offset نسبة إلى ماذا؟
Aهي نسبة إلى font-size للعنصر، حيث 100% تساوي حجم الخط الحالي. مثلًا، مع حجم خط 16px، تُزاح الخط بمقدار text-underline-offset: 30% نحو الأسفل حوالي 4.8px. والقيمة 0 تُبقي التسطير ملتصقًا بأسفل النص.
Qكيف أنشئ فجوة بين التسطير والنص في CSS؟
Aبالإضافة إلى text-decoration: underline، أضف text-underline-offset: 3px (أو 0.2em) فيتحرك التسطير للأسفل ككل. اقترنه بـ text-decoration-thickness لضبط السمك أيضًا والحصول على تسطير روابط أكثر أناقة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
