0

I am trying to animate background-color property on hovering from bottom to top and again from bottom to top when mouse is out. I have this pen, but it seems like width: 100% and height: 100% in ::after is calculated based on <p> tag, not <span>.

So how can I fix it? I want background-color animation just on underlined text (dolor), not for the whole paragraph.

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  position: relative;
  font: 2em sans-serif;
}

.underlined {
  font-weight: bold;
  text-decoration: underline solid black 0.1em;
  transition: color 0.25s ease-out;
}
.underlined::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* 100% of <p>, not <span> */
  height: 100%; /* 100% of <p>, not <span> */
  background: black;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease-out;
}

.underlined:hover {
  color: white;
}
.underlined:hover::after {
  transform: scaleY(1);
  transform-origin: bottom;
}
.underlined:hover::selection {
  color: black;
  background: white;
}
<div>
  <p>Lorem ipsum <span class="underlined">dolor</span> sit amet</p>
</div>
bone_appettit
  • 105
  • 1
  • 6

2 Answers2

2

add a position to <span> with class .underlined

.underlined {
    position: relative;
}
sumeshsn1
  • 756
  • 5
  • 13
0
    .main-nav-link {
      color: #0F1D4A;
      font-size: 1rem;
      font-weight: 700;
      display: flex;
      flex-direction: column;
    }
 .under-line::after {
    height: 5px;
    background: #6ECDE5;
    width: 0px;
    position: absolute;
    content: "";
    transition: all 0.2s ease;
}

 .main-nav-link:hover{
                        .under-line{
                            &::after {
                                width: 100%;
                            }
                        }
                    }



  <a class="main-nav-link" href="https://happytots.a101.co/shop/">All<span class="under-line"></span></a>
Shebin KP
  • 115
  • 4