Question

所以我希望这个下划线悬停效果只能延伸到我悬停在其上的文本的长度，而不是更多。我试图插入一些带有伪选择器的形状，如果我把例如太长的下划线覆盖所有长度，但不能覆盖溢出，但是不能让它按照假设的方式工作......也许任何想法？

这是指向我的codepen的链接：http://codepen.io/anon/pen/jVqqEZ

* {
  background-color: blue;
}

li > a {
  position: relative;
  color: white;
  text-decoration: none;
}

li > a:hover {
  color: white;
}

li > a:before {
  content: "";
  position: absolute;
  width: 70%;
  height: 1px;
  bottom: 0;
  left: -10;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

li > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
/*
li > a:after {
  content: "";
  background-color: yellow;
  height: 10px;
  width: 100px;
}*/

<ul class="menu">
  <li><a href="#about" class="slide-section">About</a></li>
  <li><a href="#works" class="slide-section">Works and stuff</a></li>
  <li><a href="#contact" class="slide-section">Contact</a></li>
</ul>

Answer 1

li > a:before {
   width: 70%; /* initial*/
   width: 100%; /* changed value*/
}

Answer 2

* {
  background-color: blue;
}

li > a {
  position: relative;
  color: white;
  text-decoration: none;
}

li > a:hover {
  color: white;
}

li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: -10;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

li > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
/*
li > a:after {
  content: "";
  background-color: yellow;
  height: 10px;
  width: 100px;
}*/

<ul class="menu">
  <li><a href="#about" class="slide-section">About</a></li>
  <li><a href="#works" class="slide-section">Works and stuff</a></li>
  <li><a href="#contact" class="slide-section">Contact</a></li>
</ul>

Answer 3

在css中使用以下内容：

li > a:before {
...
width: 100%; // not 70 %
...
}

使CSS下划线动画与链接文本的长度相同

3 个答案: