Hello I am self thought and currently studying on making a website, I want to transfer this red underline to other text when clicked in my navigation bar but it's stuck to the "Home" i wonder what's wrong with my code

        body {
  margin: 0px;
  padding: 0px;
  background-image: url('background3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
}

.logo {
  height: 70px;
  width: 70px;
  position: relative;
  right: 700px;
  float: left;
}

h1 {
  color: white;
  position: absolute;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 90px;
  font-weight: bold;
  text-align: left;
  padding-top: 220px;
  padding-left: 200px;
  p {
    color: white;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: lighter;
    text-align: left;
    padding-top: 380px;
    padding-left: 200px;
  }
  .front:hover {
    text-decoration: none;
    color: red;
    transition: 250ms;
  }
  #dot {
    color: red
  }
  .topnav {
    width: 50px;
    margin: 0 auto;
  }
  header {
    background-color: black;
  }
  header::after {
    content: '';
    display: table;
    clear:both nav {
      float: right;
    }
    nav ul {
      list-style: none;
      padding-right: 100px;
    }
    nav li {
      display: inline-block;
      margin-left: 60px;
      font-size: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      padding-top: 0px;
    }
    a:hover {
      color: red;
      transition: 250ms;
    }
    nav a {
      text-decoration: none;
    }
    nav a:visited {
      text-decoration: none;
      text-transform: uppercase;
      color: white;
    }
    nav a:focus {
      text-decoration: none;
      color: red;
      transition: 250ms;
    }
    nav a:hover {
      text-decoration: none;
      color: red;
      transition: 250ms;
    }
    nav a:active {
      color: red;
    }
    nav a.active::after {
      color: red;
      width: 3%;
    }
    nav a.redline::after {
      position: absolute;
      content: '';
      height: 3px;
      width: 3%;
      background-color: red;
      background-image: linear-gradient(to right, red, black);
      bottom: 885px;
      left: 1340px;
      animation: appear 0.5s linear;
      @keyframes appear {
        from {
          width: 0px;
        }
        to {
          width: 3%;
        }

<!-- Front Page -->

<div >
  <h1><a>Hey, I'm J</a><span id="dot">.</span></h1>
  <p><a>a student</a></p>
</div>

<!-- Navigation Bar -->
<header>
  <div >
    <img src="image.png" href="index.html" alt="logo" >
  </div>

  <nav>
    <ul>
      <li><a  href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>

</header>

CodePudding user response：

I added some markup to nest your nav components, called it div >. Then added some styles and a flexbox to your ul and navbar and then used your same redline class you were trying to get the effect with and added a ::after to style the red border-bottom. There are many variations of ways to do this, but this is one. See the CSS changes I made under the /* additions */ portion of your CSS.

Also, I wouldn't recommend using absolute positioning on p's which will be problematic down the road.

/* additions */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  height: 80px;
  width: 100vw;
  position: absolute;
  top: 0;
}

.navbar a {
  color: white;
  text-decoration: none;
}
.navbar ul {
  display: flex;
  gap: 40px;
  list-style-type: none;
}

.redline::after {
  display: block;
  content: '';
  border-bottom: solid 3px red;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  transform-origin:100% 50%
}


.redline:hover::after { 
  transform: scaleX(1);
  transform-origin:0 50%;
}


/* additions end */


body {
  margin: 0px;
  padding: 0px;
  background-image: url('background3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
}

.logo {
  height: 70px;
  width: 70px;
  position: relative;
  right: 700px;
  float: left;
}

h1 {
  color: white;
  position: absolute;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 90px;
  font-weight: bold;
  text-align: left;
  padding-top: 220px;
  padding-left: 200px;
}
  p {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: lighter;
    text-align: left;
  }
  .front:hover {
    text-decoration: none;
    color: red;
    transition: 250ms;
  }
  #dot {
    color: red
  }
  .topnav {
    width: 50px;
    margin: 0 auto;
  }
  header {
    background-color: black;
  }

    nav ul {
      list-style: none;
      padding-right: 100px;
    }
    nav li {
      display: inline-block;
      margin-left: 60px;
      font-size: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      padding-top: 0px;
    }

<!-- Front Page -->

<div >
  <h1><a>Hey, I'm J</a><span id="dot">.</span></h1>
  <p><a>a student</a></p>
</div>

<!-- Navigation Bar -->
<header>
  <div >
    <img src="image.png" href="index.html" alt="logo" >
  </div>
<div >
  <nav>
    <ul>
      <li><a  href="index.html">Home</a></li>
      <li><a  href="projects.html">Projects</a></li>
      <li><a  href="contact.html">Contact</a></li>
      <li><a  href="about.html">About</a></li>
    </ul>
  </nav>
</div>

</header>

CodePudding user response：

You have only targeted one element with '.redline' class. You should give class='redline' to each one of them to work.