My goal is to make horizontal line between The Anchor element, with ::before and ::after Pseudo Elements on hover.

The problem in my code is that horizontal line appears only on about element, when goal is to make it on every element. in developer tool it shows that properties are on every element before and after but it only appears on one (about) element as I said.

Can you help me, how to fix this code ?

nav,
nav ul {
  height: 100vh;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  flex-direction: column;
  /* justify-content: stretch; */
  list-style: none;
}

.nav-item {
  height: 8%;
}

.home-icon {
  padding-right: 0.5rem;
}

nav li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 10px;
  height: 20%;
  /* overflow: hidden; */
}

nav li a {
  font-family: 'Nunito', sans-serif;
  font-weight: 1000;
  font-size: 1.2rem;
  color: whitesmoke;
  letter-spacing: 2px;
  text-decoration: none;
  text-align: center;
}

nav li a:hover {
  letter-spacing: 8px;
}

nav li a::before {
  content: '';
  width: 35vw;
  height: 3px;
  background-color: whitesmoke;
  position: absolute;
  top: 35%;
  left: 0;
  opacity: 0;
}

nav li a::after {
  content: '';
  width: 35vw;
  height: 3px;
  background-color: whitesmoke;
  position: absolute;
  top: 35%;
  right: 0;
  opacity: 0;
}

nav li a:hover::before {
  opacity: 1;
}

nav li a:hover::after {
  opacity: 1;
}

<nav>
  <ul>

    <li>
      <img  src="./img/home.svg" alt="home" />
      <a href="#">Home</a>
    </li>
    <li>
      <img src="./img/disk.svg" alt="about" />
      <a href="#about">About</a>
    </li>
    <li>
      <img src="./img/skills.svg" alt="skills" />
      <a href="#skills">Skills</a>
    </li>
    <li>
      <img src="./img/briefcase.svg" alt="briefcase" />
      <a href="#projects">Projects</a>
    </li>
    <li>
      <img src="./img/contacts.svg" alt="contacts" />
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

CodePudding user response：

There were multiple problems with your CSS.

First off your were positioning your before and after absolutely, so they were always appearing in the same place. Second off, ::after and ::before are inline items by default so you need to set them to display: inline-block or the width won't take place.

I also took the liberty of reducing with width of your before and after since Projects is too long for 35vw on both sizes and would make the ::after appear below.

Code;

nav,
nav ul {
  height: 100vh;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  flex-direction: column;
  /* justify-content: stretch; */
  list-style: none;
}

.nav-item {
  height: 8%;
}

.home-icon {
  padding-right: 0.5rem;
}

nav li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 10px;
  height: 20%;
  /* overflow: hidden; */
}

nav li a {
  font-family: 'Nunito', sans-serif;
  font-weight: 1000;
  font-size: 1.2rem;
  color: whitesmoke;
  letter-spacing: 2px;
  text-decoration: none;
  text-align: center;
}

nav li a:hover {
  letter-spacing: 8px;
}

nav li a::before {
  content: '';
  margin-right: 10px;
  width: 25vw;
  height: 3px;
  background-color: whitesmoke;
  opacity: 0;
  display: inline-block;
}

nav li a::after {
  content: '';
  width: 25vw;
  margin-left: 10px;
  height: 3px;
  background-color: whitesmoke;
  opacity: 0;
  display: inline-block;
}

nav li a:hover::before {
  opacity: 1;
}

nav li a:hover::after {
  opacity: 1;
}

<nav>
  <ul>
    <li>
      <img  src="./img/home.svg" alt="home" />
      <a href="#">Home</a>
    </li>
    <li>
      <img src="./img/disk.svg" alt="about" />
      <a href="#about">About</a>
    </li>
    <li>
      <img src="./img/skills.svg" alt="skills" />
      <a href="#skills">Skills</a>
    </li>
    <li>
      <img src="./img/briefcase.svg" alt="briefcase" />
      <a href="#projects">Projects</a>
    </li>
    <li>
      <img src="./img/contacts.svg" alt="contacts" />
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>