شرح صفوف ومحتوى الفقرة
بدلاً من إزالة الخط السفلي عشوائياً من الروابط الموجودة وسط الفقرات، تمنحك خصائص تنسيق النصوص الحديثة تحكماً أنيقاً في وضوح خط التسطير ومسافته:
- إلغاء الخط عبر
text-decoration: none: يناسب روابط القوائم العلوية وأزرار التنقل المستقلة التي يدل شكل صندوقها بوضوح على قابليتها للنقر. - ضبط المسافة والسُمك عبر
text-underline-offsetوtext-decoration-thickness: تُبعد خط التسطير قليلاً للأسفل بمقدار4pxمثلاً، فلا يقطع نقاط الحروف العربية السفلية مثل «ي» و«ب» ولا يتداخل مع الحروف الإنجليزية الممتدة للأسفل. - مؤشر اليد التفاعلي التلقائي: يمنح المتصفح تلقائياً كل وسم
<a href="...">صالح مؤشر اليد التفاعلي بمجرد وجود سمة الوجهةhrefدون الحاجة لأي قاعدة إضافية، بينما يؤدي حذفhrefإلى فقدان مؤشر اليد وتعطيل الوصول عبر لوحة المفاتيح معاً:
CSS
.prose-link {
color: #5b3894;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.prose-link:hover {
color: #0f766e;
}