::after pseudo class not being properly applied to an anchor tag for hover animation-CodePudding

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" ></a>
    <div>
      <ul id="navbar">
        <li><a  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 ></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>

CodePudding user response：

Assuming that you would like to stick to your current HTML structure, all you need to do is to add the position property to your #hero a selector and give it the value of relative. Modify your properties for your #hero a:hover::after selector into

#hero a:hover::after{
  content: "";
  width: 100%;
  height: 5px;
  background: #e50914;
  position: absolute;
  bottom: 0px;
  left: 0;
}

You can learn more about CSS positions by reading through these articles by MDN and CSS Tricks.

The reason the colour of your link is not changing on the hover state is because of the extra comma just before the curly braces on your selector. Remove this and everything should work as expected.

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  margin: 0;
  background-color: #121212;
}

/* Header Section */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 80px;
  background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.6629026610644257) 0%, rgba(9,9,121,0) 57%);
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#navbar li {
  list-style: none;
  padding: 0 20px;
  position: relative;
}

#navbar li a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  transition: 200ms ease-in-out;
}

#navbar li a:hover,
#navbar li a.active {
  color: #e50914;
}

#navbar li a.active::after,
#navbar li a:hover::after {
  content: "";
  width: 30%;
  height: 3px;
  background: #e50914;
  position: absolute;
  bottom: -6px;
  left: 20px;
}

.logo {
  width: 10rem;
}

/* 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;
  position: relative;
}

#hero a:hover {
  color:white;
}

#hero a:hover::after{
  content: "";
  width: 100%;
  height: 5px;
  background: #e50914;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.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;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Snap Smile</title>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">

  <!-- Styles Sheet -->
  <link rel="stylesheet" href="styles.css">

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/6b5d823830.js" crossorigin="anonymous"></script>
</head>

<body>

  <section id="header">
    <a href="#"><img src="images/logo.png" ></a>
    <div>
      <ul id="navbar">
        <li><a  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 ></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>
    <!-- <video autoplay loop muted plays-inline >
      <source src="Videos/banner-video.mp4" type="video/mp4">
    </video> -->
  </section>
</body>

</html>

CodePudding user response：

You had your CSS selector wrong #hero a:hover,{ ... } it shouldn't have the comma after "hover"

I also cleaned up the underline and made it fade in on hover

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  margin: 0;
  background-color: #121212;
}


/* Header Section */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 80px;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6629026610644257) 0%, rgba(9, 9, 121, 0) 57%);
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#navbar li {
  list-style: none;
  padding: 0 20px;
  position: relative;
}

#navbar li a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  transition: 200ms ease-in-out;
}

#navbar li a:hover,
#navbar li a.active {
  color: #e50914;
}

#navbar li a.active::after,
#navbar li a:hover::after {
  content: "";
  width: 30%;
  height: 3px;
  background: #e50914;
  position: absolute;
  bottom: -6px;
  left: 20px;
}

.logo {
  width: 10rem;
}


/* 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;
  position: relative;
  transition: 200ms ease-in-out;
}

#hero a::after {
  content: "";
  width: 100%;
  height: 5px;
  background: transparent;
  position: absolute;
  bottom: 0px;
  left: 0;
  
  transition: 200ms ease-in-out;
}

#hero a:hover { color: white }
#hero a:hover::after { background: #e50914 }

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

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">

<script src="https://kit.fontawesome.com/6b5d823830.js" crossorigin="anonymous"></script>


  <section id="header">
    <a href="#"><img src="images/logo.png" ></a>
    <div>
      <ul id="navbar">
        <li><a  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 ></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>
      <!-- <video autoplay loop muted plays-inline >
      <source src="Videos/banner-video.mp4" type="video/mp4">
    </video> -->
  </section>