Question

当您将鼠标悬停在https://haikure.com/en/上的文字上时，会在其下方创建一条线，这是怎么做到的？

希望复制这种效果。源代码是：

<a href="#" class="button-collapse sidenav-dismiss visible-xs" role="button"><img src="https://haikure.com/img/sidenav-dismiss.svg" /></a>
    <ul class="nav navbar-nav" role="tablist" aria-multiselectable="true">
    <li>
        <a href="#shop-women" role="button" data-toggle="collapse" aria-expanded="false">Shop Woman</a>
                <ul id="shop-women" class="sub nav collapse">
    <li>
        <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017">See all</a>
            </li>
                        <li>
        <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/skirt">Skirt</a>
            </li>
                      <li>
        <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/jeans">Jeans</a>
            </li>
                      <li>
        <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/tank-top">Tank Top</a>
            </li>
                      <li>
         <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/tshirts">Tshirts</a>
            </li>
                      <li>
         <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/trench">Trench</a>
            </li>
                      <li>
         <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/bomber">Bomber</a>
            </li>
                      <li>
          <a href="https://haikure.com/en/store/collections/woman-spring-summer-2017/jacket">Jacket</a>
            </li>
                  </ul>
    </li>

Answer 1

他们正在使用伪类：hover和：after来实现这种效果。

我为你做了一个演示。

请不要忘记将答案标记为已接受

.underline:after {
  content: '';
    display: block;
    position: relative;
    top: -2px;
    width: 0%;
    height: 1px;
    background-color: red;
    -ms-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.underline:hover::after {
    width: 100%;
    background-color: red;
}

.underline {
  display: inline-block;
}

<p class="underline">
Hover Me
</p>

如何在文本悬停时创建一行？

1 个答案: