文本悬停时如何创建行？

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>