Javascript CSS按钮动画赢得'；行不通

我一直在尝试为页面中的一些按钮在悬停状态下执行动画。为此，我编写了以下CSS：

#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
}

动画应该加载页面底部黑色div按钮底部的一个小条，但是，我的动画不起作用。是什么导致了问题

---

当您将鼠标悬停在元素上时，需要提供宽度以显示栏

使用下面的css获得所需的结果

 #B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
}

#B1:hover::after {
    width:100%
 }

#B2:hover::after {
    width:100%
 }

---

笔：

鼠标悬停后未设置条形样式值

当鼠标悬停在按钮上时，按钮中的条形宽度将更改为100%

请在#B1和#B2中添加CSS样式“&:hover:after{width:100%；}”

代码笔：

---

“然而，我的动画不起作用。”你能描述一下“不起作用”吗？预期结果是什么？当我将鼠标悬停在按钮上时，按钮会旋转是的。。。？他们会轮换吗？有什么问题？使用连贯的句子，解释你想要什么，什么不起作用，并提供适当的代码示例。我的CSS代码片段中的B1指出了我正在谈论的按钮。。我相信这足以指出这一点。请提供一个无干扰的代码示例。有很多代码不属于你的问题。介意回答我在聊天中关于这个的一个简短问题吗？@feners当然，ping me我怎么能ping你？哦，好的，你可以在skype上ping我，用户id-dare2701

#B1 {
  margin: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  }
  &:hover:after {
    width: 100%;
  }
}

#B2 {
  margin: 50px;
  flex: 1 1 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #f7f7f7;
  } 
  &:hover:after {
    width: 100%;
  }
}