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

بازدید37.1kپست ها1آخرین فعالیت6 سال پیش
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 رو من تا به حال ندیده بودم! خیلی خوب شده!

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

هیچ وقت در پرسیدن سوال شک نکنید

خوش آمدید

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