نوع خط تزئین متن – ویژگی text-decoration-line در CSS

ویژگی text-decoration-line در CSS برای تعیین نوع یا موقعیت خط تزئین متن (به عنوان مثال به صورت آندرلاین یا خط بالا) به کار می‌رود.

نکته: مقدار این ویژگی در کنار سایر ویژگی های مرتبط با خط تزئین متن با کمک ویژگی خلاصه text-decoration نیز قابل تعیین است. بنابراین اگر می‌خواهید چند ویژگی مختلف نظیر نوع، رنگ، استایل و ضخامت خط تزئین متن را مشخص کنید می‌توانید تمام آن‌ها را با کمک ویژگی text-decoration به صورت یکجا تنظیم کنید.

بیشتر بخوانید: خط تزئین متن در CSS – ویژگی text-decoration

نحوه استفاده از ویژگی text-decoration-line و تعیین نوع خط تزئین متن

برای تعیین نوع خط تزئین متن در CSS کافیست مقدار ویژگی text-decoration-line را مشابه با مثال زیر مشخص کنید:

a {
  text-decoration-line: underline;
}

مقدار underline برای این ویژگی در قانون بالا باعث می‌شود زیر تمام لینک ها (یا المان های <a>) یک خط زیر ساده (یا آندرلاین) رسم شود. تصویر زیر نتیجه قانون فوق روی یک لینک نمونه را (با فرض مقادیر پیشفرض عامل کاربری برای سایر ویژگی‌های مرتبط) نمایش می‌دهد:

شما می‌توانید به طور همزمان از چند مقدار برای این ویژگی استفاده کنید. مثال زیر نمونه‌ای از این حالت برای رسم خط زیر و خط بالا را نمایش می‌دهد:

p {
  text-decoration-line: underline overline;
}

نتیجه قانون CSS فوق روی یک پاراگراف (یا المان <p>) فرضی مشابه با تصویر زیر رندر می‌شود:

مقادیر متداول

برای ویژگی text-decoration-line می‌توانید از مقادیر متداول زیر استفاده کنید:

• none: این مقدار به عنوان مقدار پیشفرض برای ویژگی text-decoration-line باعث می‌شود هیچ خط تزئینی برای متن رسم نشود. یکی از کاربردهای رایج برای استفاده از این مقدار، حذف خطی است که معمولا زیر لینک ها به عنوان ظاهر پیشفرض رسم می‌شود. به این ترتیب امکان تعیین ظاهر خاص برای لینک‌هایی مانند آیتم‌های منوی سایت و … فراهم می‌شود.
• underline: این مقدار باعث می‌شود خط تزئینی به صورت آندرلاین زیر متن رسم شود. یکی از کاربردهای رایج این مقدار، رسم خط زیر برای لینک های عادی صفحه است. به علاوه از این مقدار برای نمایش بخشی از متن که پس از بازبینی و … اضافه شده است هم استفاده می‌شود. (بیشتر بخوانید: متن اضافه شده در HTML).
• overline: این مقدار سبب می‌شود خط تزئینی بالای متن رسم شود.
• line-through: این مقدار باعث می‌شود خط تزئینی به صورت استرایکترو روی متن رسم شود. یکی از کاربردهای رایج برای این مقدار، رسم خط روی متونی است که می‌خواهیم به عنوان متن حذف شده نادیده گرفته شوند. (بیشتر بخوانید: متن حذف شده در HTML).

در تصویر زیر می‌توانید نتیجه تک تک مقادیر فوق برای ویژگی text-decoration-line را روی یک متن ساده (واژه Text) مشاهده کنید:

بازگشت به فهرست مجموعه آموزشی CSS