CSS 버튼 애니메이션이 작동하지 않습니다.

Question

내 페이지의 일부 버튼을 마우스로 가리 키도록 애니메이션을 가져 오려고했습니다.

이 애니메이션은 그러나, 페이지 하단에 검은 색 DIV에있는 버튼의 아랫 부분에 작은 줄을로드하도록되어

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

, 내 애니메이션을 수행합니다 나는 이것을 달성하기 위해 다음과 같은 CSS를 썼다 작동하지. 문제의 원인은 무엇입니까?

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 %로 변경됩니다.

는 CSS 스타일 추가하십시오 "&을 : 호버 :; : {100 % 폭} 후"#의 B1과 #의 B2에서

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