CSS3でメニュー下線（上線）のアニメーション

• creater


• 15 10月 2014

サンプル

HTML

[html]
<p><a href="#">HOME</a></p>
[/html]

CSS

[css]
p {background-color:#000;}
a {
display:block;
width:100px;
height:60px;
line-height:60px;
color:#F90;
text-align:center;
text-decoration:none;
}
a:after {
display:block;
content:" ";
width:0;
height:3px;
background-color:#F90;
position:relative;
top:-16px;
left:50px;
-webkit-transition:all ease 0.3s;
}
a:hover:after {
background-color:#F90;
left:0px;
width:100px;
}
[/css]