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

CSS

توسط reza-irdev در 4 سال پیش
0 513 1 4 سال پیش
reza-irdevbehnamdesigner
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 رو من تا به حال ندیده بودم! خیلی خوب شده!

خوش آمدید

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

لطفا ابتدا لاگین کنید