CSS按鈕動畫無效

Question

我一直在嘗試讓動畫在頁面上的某些按鈕上懸停時執行。 我編寫了以下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的按鈕底部加載一個小條，但是，我的動畫無法正常工作。 是什么原因引起的？

https://codepen.io/Feners4/pen/KggAwg

Answer 1

將鼠標懸停在元素上時，需要提供寬度以顯示條形圖。

使用以下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%
 }

筆： https : //codepen.io/anon/pen/LxYEdX

Answer 2

鼠標懸停后未設置條形樣式值。

當您將鼠標懸停在按鈕上時，按鈕中的條形寬度將更改為100％。

請在＃B1和＃B2中添加CSS樣式“ ＆：hover：after {width：100％;}之后 ”

Codepen： http ：//codepen.io/onyoon7/pen/rjNaov

#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%;
  }
}