با استفاده از ویژگی 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.
سلام میشه کاری کرد که خطوط فاصله بیشتری از متن بگیرند؟
یک ویژگی هستش که کارش قرار همین باشه ولی فعلا توی مرورگرها پیاده سازی نشده. فعلا می تونید از بنا به شرایطتون border-bottom یا ترفندهایی مثل پست زیر استفاده کنید:
http://css-tricks.ir/?p=5741
خدایی وب سایتت خیلی حقه به محض اینکه لوگوشو میبینم بازش میکنم اصلی ترین دلیلمم اینکه من به کد های css واردم فقط بعضی چیزا مثل همین تکست دکوریشن میخوام ببینم چه مقادیری میگیره فورا تصویرشو پیدا میکنم و وارد جزوم میکنم خیلی ممنون