CODEWITHSUNDEEP
htmlcss
user14312722
user14312722

Reputation:

Why the transition property doesn't work?

I'd like to apply the transition property for ::hover and ::before (to make dynamic changing of the width property) at the same time but it's only works for hover.

.nav-list{
    // border: 1px blue solid;
    display: flex;
    align-items: center;
    list-style: none;
    > li {
        padding-right: 1.2rem;
        
        > a { 
            position: relative;
            text-decoration: none; 
            color: var(--Dark-grayish-blue);
            &:hover{
                color: rgb(0, 0, 0);
                transition: all 0.5s; /* here is working */
                &::before{
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 2.5rem;
                    width: 100%;
                    transition: width 3s; /* but here doesn't*/
                    height: .3rem;
                    border-radius: .1rem;
                    background: var(--Orange);
                }
            }
        }
    }
    
}
<ul class="nav-list">
        <li class="item"><a href="#Collections" class="link">Collections</a></li>
        <li class="item"><a href="#Men" class="link">Men</a></li>
        <li class="item"><a href="#Women" class="link">Women</a></li>
        <li class="item"><a href="#About" class="link">About</a></li>
        <li class="item"><a href="#Contact" class="link">Contact</a></li>
   </ul>

Upvotes: 1

Views: 81

Answers (1)

Ramesh Reddy
Ramesh Reddy

Reputation: 10652

transition is not working because ::before is only created on hover. ::before needs to be defined earlier, so that the transition starts from an initial state and ends with whatever is specified on :hover:

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav-list .item {
  padding-right: 1.2rem;
}

.nav-list .item .link {
  position: relative;
  text-decoration: none;
  color: gray;
}

.nav-list .item .link::before {
  position: absolute;
  content: '';
  left: 0;
  top: 1.5rem;
  width: 100%;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform .5s;
  height: .3rem;
  border-radius: .1rem;
  background: orangered;
}

.nav-list .item .link:hover {
  color: rgb(0, 0, 0);
  transition: color 0.5s;
}

.nav-list .item .link:hover::before {
  transform: scaleX(1);
}
<ul class="nav-list">
  <li class="item"><a href="#Collections" class="link">Collections</a></li>
  <li class="item"><a href="#Men" class="link">Men</a></li>
  <li class="item"><a href="#Women" class="link">Women</a></li>
  <li class="item"><a href="#About" class="link">About</a></li>
  <li class="item"><a href="#Contact" class="link">Contact</a></li>
</ul>

Upvotes: 1

Related Questions