是这样的，我打算做一个按钮的特效，具体如下：
初始状态是，class=line 的span标签处于整个main框体外（用样式来使他看起来像一条线）。
当 class=button 的a标签处于hover状态时，class=line 的span元素会向右移动直到和main框体左对齐，并且它的长度（width）变得和main框体一样长。
.button:hover .line这个写法是从 按钮特效-技术学习教程-慕课网 学的，看他老人家用得风生水起，不明白为何我用不了。
先行感谢想建议我用jq或者js实现的朋友。我还是想用css3实现，如果可以的话。
下面附上代码：
<!DOCTYPE html>
<html>
<head>
<title>about</title>
<meta charset="utf-8" />
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
color:#fff;
margin:20px 0;
}
.main{
background:#aaa;
color:#fff;
width:80px;
height:100px;
text-align:center;
position:relative;
left:200px;
top:100px;
}
.main .inner{
margin-top:50px;
background:#4b260a;
border-radius:2px;
}
.line{
width:5px;
height:2px;
border:0;
background:#000;
position:absolute;
top:40px;
left:-100%;
transition:0.3s ease-out;
-ms-transition:0.3s ease-out;
-o-transition:0.3s ease-out;
-moz-transition:0.3s ease-out;
-webkit-transition:0.3s ease-out;
}
.button:hover .line{
width:100%;
left:0;
}
</style>
</head>
<body>
<div class="main">
<a href="#" class="button">按钮<div class="inner">button</div></a>
<span class="line"></span>
</div>
</body>
</html>
.button:hover .line这样写是后代选择器，你的子孙元素有这个类吗？
解决方案：
使用相邻兄弟选择器：.button:hover + .line