:before로 적용된 배경이 100%로 채워지지 않습니다 ㅜㅜ

이렇게 적용했습니다~ /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; } a { text-decoration: none; color: #222; } .sns { background-color: #eee; padding: 40px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0, 0.13); margin-top: 25px; } .sns a { border: 5px solid white; display: inline-block; width: 80px; height: 80px; border-radius: 50%; position: relative; background-color: #fff; margin: 10px; overflow: hidden; } .sns a:before { content :""; position: absolute; width : 100%; height: 100%; background-color: white; transition : 0.5s; } .sns a:hover:before { height: 0px; } .sns a:nth-child(1) { background-color: #3b5999; } .sns a:nth-child(2) { background-color: #55acee; } .sns a:nth-child(3) { background-color: #dd4b39; } .sns a:nth-child(4) { background-color: #0077b5; } .sns a:nth-child(5) { background: linear-gradient(#744999,#e22484,#e8442f,#f0c441); } .sns a .fa { position: relative; top : 50%; left : 50%; transform: translate(-50%,-50%); font-size: 33px; color: black; transition : 0.5s; } .sns a:hover .fa { color: white; }