CSS-Button-Animation wird nicht funktionieren

Question

Ich habe versucht, eine Animation für einige Schaltflächen auf meiner Seite bei Hover ausgeführt werden. Ich schrieb das folgende CSS, dies zu erreichen:

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

Die Animation soll eine kleine Leiste am unteren Teil der Tasten laden, bis sich an dem schwarzen div am unteren Rand der Seite, aber meine Animation tut nicht arbeiten. Was verursacht das Problem?

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

Answer 1

Sie müssen Breite, um die Leiste anzuzeigen, wenn Sie auf das Element schweben.

Verwenden Sie die folgenden CSS, um das gewünschte Ergebnis zu erhalten.

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

Stift: https://codepen.io/anon/pen/LxYEdX

Answer 2

Sie nicht die Bar-Stil-Wert nach Mouseover gesetzt haben.

Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird die Balkenbreite in der Schaltfläche auf 100% geändert.

Bitte fügen Sie den CSS-Style "&: Hover: nach {width: 100%;}" in # B1 und # 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%; 
    } 
}