将伪 a::after 的宽度作为容器答案

【问题标题】：Making the width of pseudo a::after as the container将伪 a::after 的宽度作为容器
【发布时间】：2018-03-16 19:15:22
【问题描述】：

我正在尝试过渡到一些“a”标签。也就是当鼠标悬停时，下划线在其文本字符串上从左到右缓慢增长。

我认为我应该使用 a 标签的伪来制作它，我成功地进行了类似的转换，但是它有一个让我卡住的问题。

.test a {
  font-size: 5vw;
  text-decoration: none;
  color: #000;
}

.test a::after {
  content: '';
  display: block;
  height: 0.1em;
  left: 0;
  background-color: #000;
  transition: 0.5s ease-in-out;
  width: 0;
}

.test a:hover::after {
  width: 100%;
}

<div class="test">
  <a href="#">text for the test</a>
</div>

我将 a::after 的宽度从 0 更改为 100% 但是宽度 100% 由 .test 的大小呈现，而不是“a”的大小。所以下划线的长度不适合文本。它适合屏幕尺寸。

我无法理解为什么 a::after 不遵循其父级 a 的大小。并且想知道我怎样才能使 a::after 跟随 'a' 的大小。

【问题讨论】：

标签： html css pseudo-element

【解决方案1】：

您可以添加：

.test {
  display: inline-block;
}

或

.test a {
  display: inline-block;
}

使框的大小与内容相匹配。

.test {
  display: inline-block;
}

.test a {
  font-size: 5vw;
  text-decoration: none;
  color: #000;
}

.test a::after {
  content: '';
  display: block;
  height: 0.1em;
  left: 0;
  background-color: #000;
  transition: 0.5s ease-in-out;
  width: 0;
}

.test a:hover::after {
  width: 100%;
}

<div class="test">
  <a href="#">text for the test</a>
</div>

【讨论】：

哇天才：非常感谢！

【解决方案2】：

这是另一个没有使用伪元素且没有大小问题的想法：

.test a {
  font-size: 5vw;
  text-decoration: none;
  color: #000;
  padding-bottom:0.1em;
  background-image:linear-gradient(#000,#000);
  background-size:0% 0.1em;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition: 0.5s ease-in-out;
}

.test a:hover {
  background-size:100% 0.1em;
}

<div class="test">
  <a href="#">text for the test</a>
</div>

【讨论】：