افکت Underline برای لینک ها

بازدید37.3kپست ها1آخرین فعالیت10 سال پیش
0
0

سلام دوستان
امروز یه ترفند جالب میخوام براتون بذارم که میتونید برای نمایش Underline در لینک ها یک افکت جالب ایجاد کنید.

کافیه از این کد CSS استفاده کنید:

a {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
    text-decoration: none;
    font:800 15px arial;
}
a:after {
	content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .4s ease, background-color .4s ease;
}
a:hover:after {
	width: 100%;
	background: blue;
}

و کد HTML:
<a href="http://softafzar.net">SOFTAFZAR.NET</a>

دمو: Edit fiddle - JSFiddle
ازاین افکت برای لینکها در قسمت لیست تگهای HTML هم استفاده شده.
موفق باشید.

0

واقعا عالی و زیباست ممنون
راستی قسمت لیست تگهای HTML رو من تا به حال ندیده بودم! خیلی خوب شده!

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.