Эффект css hover происходит за пределами кнопки

Question

Мой текущий код генерирует элемент (черную полосу) сверху и снизу моей ссылки. нижняя панель всегда находится там, верхняя панель происходит только при наведении.

Мой код работает отлично, но эффект парения происходит всякий раз, когда курсор находится в строке с звеном («хит» окно, кажется, шириной экрана 100%, даже если кнопка просто текст)

#contact-btn a { 
position: relative; 
font-family: 'Montserrat', sans-serif; 
display: inline-block; 
font-size: 3em; 
letter-spacing: 1px; 
font-weight: 400; 
color: #4d4d4d; 
} 

#contact-btn a:after, #contact-btn a:before { 
display: block; 
position: absolute; 
content: ''; 
margin: 0 auto; 
background-color: #4d4d4d; 
} 

#contact-btn a:after { 
height: 2px; width: 100px; 
bottom: -15px; left: 0; right: 0; 
} 

#contact-btn a:before { 
height: 2px; width: 0; 
top: -15px; left: 0; right: 0; 
} 

#contact-btn:hover a:after, #contact-btn:hover a:before { width: 175px; height: 2px; } 

HTML

<div id="contact-btn"> 
    <a href="mailTo:..."> Click here </a> 
</div> 

Answer 1

Вы гавань установить любой стиль для контакта-BTN ДИВ себе. Попробуйте это

#contact-btn { 
    display: inline-block; 
    position: relative; 
}