text-decoration

با استفاده از ویژگی text-decoration می توان خطی بر روی نوشته یک عنصر یا بالای آن و یا پایین آن کشید. همینطور می توان خط کشیده شده را از متن عنصر حذف کرد.

 

مقادیر ویژگی text-decoration

این ویژگی چهار مقدار می پذیرد که مقادیر به شرح زیر می باشند:

 

 

overline

یک خطوط بالای سر تمام خطوط عنصر کشیده می شود.

 

line-through

یک خط روی تمام خطوط عنصر کشیده می شود. البته توصیه می شود به جای استفاده از این ویژگی از تگ های معنادار del و s در HTML استفاده شود.

 

underline

یک خط پایین تمام خطوط عنصر کشیده می شود.

 

none

می توان خطوط کشیده شده را حذف کرد. به این دلیل که عنصر a (لینک) بصورت پیشفرض دارای underline می باشد مقدار none بیشترین کاربرد را در حذف خط زیر عنصر لینک دارد. اما توصیه می شود به دلایل دست‌یابی‌پذیری خط زیر لینک را حذف نکنیم یا اگر حذف می کنیم جایگزینی که از نظر زیبایی به طرح ما می آید را بوجود آوریم.

 

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline; 
}

 

این عنصر می تواند چندین مقدار داشته باشد. فقط کافی است مقادیر مختلف را توسط یک تک فاصله از هم جدا کنیم:

 

h1 {
  text-decoration: underline overline;
}

 

در CSS3 این ویژگی تبدیل به یک ویژگی خلاصه نویسی شد که ویژگی های زیر را می توان توسط این ویژگی بصورت یکجا مقدار داد:

• text-decoration-line
• text-decoration-color
• text-decoration-style

که این ویژگی ها در زمان نوشتن این مقاله فقط در مرورگر فایرفاکس پشتیبانی می شوند.

 
دموی زیر را بررسی کنید:

 

See the Pen text-decoration by Mojtaba Seyedi (@seyedi) on CodePen.