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

CSS

توسط reza در 6 سال پیش
0 37.1k 1 6 سال پیش
reza behnamdesigner
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 رو من تا به حال ندیده بودم! خیلی خوب شده!

خوش آمدید

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