Question

嘿伙计们，我正在尝试复制类似的悬停在本网站上使用的链接影响 - www.theweeknd.com。

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

有谁知道怎么做？

Answer 1

请检查this Fiddle

上的代码

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用：hover伪元素在悬停时将CSS样式应用于链接。

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

CSS悬停对链接的影响

2 个答案: