::after pseudo class not being properly applied to an anchor tag for hover animation
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I want a red underline to display below my “BOOK NOW” anchor tag when a user hovers over it and also the text color to change to white. For some reason, the text color is not changing. I also noticed that the width of the underline which I specified as a 100%, is actually taking 100% of it’s parent element and also the underline is way below the anchor tag, it is just above the place where the parent element ends.
Here’s my HTML and CSS code
/* Hero Section */
#hero {
color: white;
height: 80vh;
padding: 0 100px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h1{
margin:0;
font-size: 3.5rem;
font-weight: 900;
padding-bottom:3rem;
width: 40%;
}
#hero p{
margin:0;
font-size: 1.5rem;
font-weight: 400;
padding-bottom: 1.5rem;
width: 30%;
}
#hero a{
text-decoration: none;
color: #e50914;
font-size: 2rem;
font-weight: 700;
transition: 200ms ease-in-out;
}
#hero a:hover,{
color:white;
}
#hero a:hover::after{
content: “”;
width: 100%;
height: 5px;
background: #e50914;
position: absolute;
bottom: 0px;
left: 20px;
}
.video-gradient{
}
.back-video {
position: absolute;
right: 0;
bottom: 0;
top: 0px;
min-width: 100%;
min-height: 80%;
width: auto;
height: auto;
z-index: -100;
}
<body>
<section id=”header”>
<a href=”#”><img src=”images/logo.png” class=”logo”></a>
<div>
<ul id=”navbar”>
<li><a class=”active” href=”why.html”>Why Snap Smile</a></li>
<li><a href=”solutions.html”>Solutions</a></li>
<li><a href=”pricing.html”>Pricing</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=””><i class=”fa-solid fa-headset”></i></a></li>
</ul>
</div>
</section>
<section id=”hero”>
<h1>Get Your Hollywood Smile Today</h2>
<p>Show off your million dollar smile with your Snap Smile Veneers</p>
<a href=”#”>BOOK NOW</a>
</section>
</body>
أضف إجابة