تخصيص ألوان تسطير النص باستخدام CSS

في تصميم الويب، تعد إضافة تسطير إلى النص ممارسة شائعة للتأكيد على المعلومات أو إبرازها. ومع ذلك، ماذا لو كنت تريد إضافة لمسة فريدة عن طريق تغيير لون التسطير؟ هل هذا ممكن؟

نعم، من الممكن تغيير لون السطر الموجود أسفل النص باستخدام CSS. فيما يلي طريقتان يمكنك استخدامهما:

الطريقة الأولى: استخدام لون زخرفة النص

الطريقة الأكثر وضوحًا هي استخدام خاصية لون زخرفة النص. تحدد هذه الخاصية لون التسطير، مما يسمح لك بتخصيصه بشكل مستقل عن لون النص.

على سبيل المثال، لإنشاء نص أحمر مع تسطير أزرق، يمكنك استخدام CSS التالي:

text-decoration-color: blue;

الطريقة الثانية: استخدام border-bottom

طريقة بديلة هي استخدام خاصية border-bottom. تقوم هذه الخاصية بإنشاء حد في أسفل النص، والذي يمكنه محاكاة التسطير. من خلال تعيين خاصية border-bottom-color، يمكنك تحديد لون التسطير.

على سبيل المثال، إليك كيفية تحقيق نفس التأثير مثل الطريقة الأولى باستخدام border-bottom:

border-bottom: 1px solid blue;
text-decoration: none;

ملاحظة: خاصية لون زخرفة النص مدعومة من قبل المتصفحات الحديثة. إذا كنت بحاجة إلى دعم المتصفحات الأقدم، فقد ترغب في استخدام طريقة border-bottom للتوافق.