如何在从下到上和再次从下到上悬停时为背景颜色设置动画

Question

我正在尝试为 background-color 属性设置动画，当鼠标悬停时从下到上悬停，然后再从下到上悬停。我有这支笔，但 ::after 中的 width: 100% 和 height: 100% 似乎是根据 <p> 标签计算的，而不是 <span>.

那我该如何解决呢？我想要 background-color 动画只在带下划线的文本 (dolor) 上，而不是整个段落。

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>

Answer 1

用 class .underlined

向 <span> 添加职位

.underlined {
    position: relative;
}

Answer 2

    .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>

如何在从下到上和再次从下到上悬停时为背景颜色设置动画

How to animate background-color on hovering from bottom to top and again from bottom to top

html

css

hover

pseudo-class

background-color