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

کافیه از این کد CSS استفاده کنید:
[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;
}[/CSS]

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

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

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

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان