html - css 悬停效果发生在按钮之外

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

您还没有为 contact-btn div 本身设置任何样式。试试这个

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