链接上的 CSS 悬停效果

Question

大家好，我正在尝试复制此网站 - www.theweeknd.com 上使用的类似悬停链接效果。

我已经尝试在论坛上搜索这个，但到目前为止我没有答案。

有人知道怎么做吗？

Answer 1

请检查 this Fiddle 上的代码

您可以使用它来实现这样的链接样式。

.test{
  font-family: "Roboto Condensed",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: calc(.27778vw + 9.11px);
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: .2s color ease-in-out;
    text-shadow: 0 1px 5px rgba(20,20,20,.3);
    position: relative;
    letter-spacing: .1em;
    line-height: 40px;
    height: 40px;
    padding: 0 .5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    background-color: transparent;
    background: transparent;
    text-decoration: none;
}

.test:before {
    content: '';
    height: 1px;
    bottom: 8px;
    left: 0;
    width: 0;
    background-color: #fff;
    transition: .2s width ease-in-out;
    position: absolute;
}

.test:hover{
  color: #888;
  outline: 0;
}

.test:hover:before {
  width: 100%;
}

<div style="height: 140px; background: #000">
  <ul>
    <li style="width: 48px"><a class="test" href="google.com">Home</a></li>
  </ul>
</div>