Question

当我悬停时，我想让滑动下划线从左向右运行，并且还设置从第一个字母到最后一个字母的行的宽度，而不是更大。我怎么能这样做？

.nav-bar a:hover {
  color: #000;
}

.nav-bar a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.nav-bar a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<div class="nav-bar">
  <ul>
    <li><a href="#">RETROSPECTIVE SHOW /2006/</a></li>
    <li><a href="#">TEXTS</a></li>
    <li><a href="#">BIBLOGRAPHY</a></li>
  </ul>
</div>

Answer 1

您可以使用display: inline-block;来保持固定宽度。对于下划线，您可以使用:before和:after等伪类。

请看下面的代码段：

/* LEFT TO RIGHT */
.sliding-left-to-right {
  display: inline-block;
  margin: 0;
}
.sliding-left-to-right:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-left-to-right:hover:after {
width: 100%;
background: blue;
}

/* LAYOUT STYLING */
body {
  margin: 20px;
}

a {
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: blue;
}

a:hover {
  color: blue;
  text-decoration: none;
  cursor: pointer;
}

<a class="sliding-left-to-right">Underline – Left to Right</a>

希望这有帮助！

尺寸滑动下划线

1 个答案: