::before pseudo element's transition is not happening-CodePudding

I am Krishna I am targeting .nav-item that when someone hover over it, its ::before pseudo element will change its box-shadow. But for some reason, it is not happening. Pls tell where I am going wrong.

code:

.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href = "https://fonts.googleapis.com/icon?family=Material Icons" rel = "stylesheet">
    <link rel="stylesheet" href="beautiful-nav-1-style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <img src="Images/logo-angular.svg" alt="logo" id='nav-logo'>
            <ul >
                <li  id="item1">
                    <a href="#" class='nav-item-a'>
                        <img src="Images/home_black_24dp.svg" alt="">
                        <span class='nav-text'>Home</span>
                    </a>
                </li>
                <li  id="item2">
                    <a href="#" class='nav-item-a'>
                        <span>
                            <img src="Images/group_black_24dp.svg" alt="">
                        </span>
                        <span class='nav-text'>About</span>
                    </a>
                </li>
                <li  id="item3">
                    <a href="#" class='nav-item-a'>
                        <img src="Images/alternate_email_black_24dp.svg" alt="">
                        <span class='nav-text'>Contact Us</span>
                    </a>
                </li>
                <li  id="item4">
                    <a href="#" class='nav-item-a'>
                        <img src="Images/shopping_cart_black_24dp.svg" alt="">
                        <span class='nav-text'>Buy</span>
                    </a>
                </li>
            </ul>
            <div  id="nav-search">
                <input type="text" value='Search website'>
            </div>
        </nav>
    </header>
</body>
</html>

.css:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: rgb(19, 14, 14);
}

nav {
    display: flex;
    height: 60px;
    width: 90%;
    background-color: white;
    margin: 50px auto;
    justify-content: space-between;
    align-items: center;
}

#nav-logo {
    width: 55px;
    padding-left: 10px;
}

.nav-bar {
    display: flex;
    width: 40%;
    justify-content: space-between;
}

.nav-item {
    list-style: none;
}

.nav-item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-top: 5px;
    cursor: pointer;
    height: 80px;
    transition: 500ms;
    text-decoration: none;
    color: black;
    font-family: cursive;
    font-weight: bold;
    width: 50px;
}

.nav-text {
    opacity: 0;
    transition: 500ms;
}

.nav-item img {
    width: 50px;
    transition: 500ms;
    border: 3px solid rgb(19, 14, 14);
    border-radius: 50%;
}

ul .nav-item::before {
    content: '';
    position: relative;
    display: block;
    top: 20px;
    left: -18px;
    height: 20px;
    width: 20px;
    background: red;
    border-top-right-radius: 100%;
    box-shadow: 5px -10px rgb(19, 14, 14, 0);
    transition-duration: 500ms;
    transition-property: all;
}

.nav-item:hover .nav-item-a{
    transform: translateY(-30px);
}

.nav-item:hover .nav-item-a img{
    background-color: orangered;
}

.nav-item:hover .nav-text{
    opacity: 1;
}

.nav-item:hover .nav-item::before{
    box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

#nav-search input {
    width: 100px;
    margin-right: 20px;
}

CodePudding user response：

The following code is incorrect:

.nav-item:hover .nav-item::before{
    box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

The following code should be used instead:

.nav-item:hover::before{
    box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

CodePudding user response：

Try this code

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: rgb(19, 14, 14);
}

nav {
  display: flex;
  height: 60px;
  width: 90%;
  background-color: white;
  margin: 50px auto;
  justify-content: space-between;
  align-items: center;
}

#nav-logo {
  width: 55px;
  padding-left: 10px;
}

.nav-bar {
  display: flex;
  width: 40%;
  justify-content: space-between;
}

.nav-item {
  list-style: none;
}

.nav-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding-top: 5px;
  cursor: pointer;
  height: 80px;
  transition: 500ms;
  text-decoration: none;
  color: black;
  font-family: cursive;
  font-weight: bold;
  width: 50px;
}

.nav-text {
  opacity: 0;
  transition: 500ms;
}

.nav-item img {
  width: 50px;
  transition: 500ms;
  border: 3px solid rgb(19, 14, 14);
  border-radius: 50%;
}

.nav-item::before {
  content: "";
  position: relative;
  display: block;
  top: 20px;
  left: -18px;
  height: 20px;
  width: 20px;
  background: red;
  border-top-right-radius: 100%;
  transition-duration: 500ms;
  transition-property: all;
}
.nav-item:hover::before {
  box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

.nav-item:hover .nav-item-a {
  transform: translateY(-30px);
}

.nav-item:hover .nav-item-a img {
  background-color: orangered;
}

.nav-item:hover .nav-text {
  opacity: 1;
}

.nav-item:hover .nav-item::before {
  box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

#nav-search input {
  width: 100px;
  margin-right: 20px;
}

    <header>
      <nav>
        <img src="Images/logo-angular.svg" alt="logo" id="nav-logo" />
        <ul >
          <li  id="item1">
            <a href="#" >
              <img src="Images/home_black_24dp.svg" alt="" />
              <span >Home</span>
            </a>
          </li>
          <li  id="item2">
            <a href="#" >
              <span>
                <img src="Images/group_black_24dp.svg" alt="" />
              </span>
              <span >About</span>
            </a>
          </li>
          <li  id="item3">
            <a href="#" >
              <img src="Images/alternate_email_black_24dp.svg" alt="" />
              <span >Contact Us</span>
            </a>
          </li>
          <li  id="item4">
            <a href="#" >
              <img src="Images/shopping_cart_black_24dp.svg" alt="" />
              <span >Buy</span>
            </a>
          </li>
        </ul>
        <div  id="nav-search">
          <input type="text" value="Search website" />
        </div>
      </nav>
    </header>