Currently, my code is producing a black bar element that appears both above and below my link. The bottom bar is always there, while the top bar only appears when the link is hovered over.
Although my code is functional, the hover effect seems to trigger whenever the cursor is aligned with the link, making it seem like the 'hit' box extends the entire width of the screen even though the button consists of just the text.
#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>