ボタンの外側でCSSホバー効果が発生する

Question

私の現在のコードは、自分のリンクの上下に要素（黒い棒）を生成します。ボトムバーは常にそこにあり、トップバーはホバリングのちょうど上に現れます。

私のコードは正常に動作しますが、カーソルがリンクに沿ったものであるときはいつでもホバー効果が起こる

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

（「ヒット」ボックスには、ボタンが単なるテキストであっても、画面の100％幅のようです）

あなたが接触-BTN自身のdivのための任意のスタイルを設定haventはHTML

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

Answer 1

。 お試しください

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