ترفند درج Underline Gradient در حالت Hover

ترفند درج Underline Gradient در حالت Hover به وسیله css3

شما با استفاده از این ترفند میتوانید , یک خط زیبا به صورت Gradient در زمانیکه کاربران بر روی لینک ها Hover میکنند را داشته باشید .

همان طور که میدانید به صورت پیش فرض یک خط آبی رنگ معمولی و ساده زیر لینک ها نمایان میشود که با ترفند زیر میتوانید این خط را از بین برده و خطی به دلخواه خود را درج نمایید .

و اما آموزش :

در ابتدا باید بگم این کار به صورت پیش فرض برای تگ های a یا همان لینک ها طراحی شده که شما به راحتی میتوانید آن را تغییر دهید .

برای این کار فقط کافیست کد های زیر را در css خود کپی نمایید :

a{
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #666;
  background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -ms-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: linear-gradient(to right, transparent 0%,#444 50%,transparent 100%);
 }

نکته 1 : برای تغییر رنگ میتوانید اعداد 444 در کد بالا که کد رنگی هگزا دسیمال میباشد را با رنگ دلخواه خود تغییر دهید .

نکته 2 : برای فاصله بین خط و نوشته میتوانید عدد 5px- را در کد های بالا تغییر دهید .

نکته 3 : کد بالا برای تمامی لینک های وب سایت میباشد . کاملا بدیهی است میتوانید به جای a در کد های بالا , تگی دیگر را جایگزین نمایید و یا مثلا به آنها کلاس  یا آی دی بدهید . مثلا vms. یا vms#

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی