Question

这个想法是当出现Hyperlink时会出现某种下划线。下划线应该缓慢增长到它的全尺寸。

这就是我到目前为止所得到的：

.wrap {
  margin: 10px auto;
  width: 600px;
}

#test {
  text-decoration: none;
}

#test:after {
  width: 0;
  transition: all 3s;
}

#test:hover:after {
  content: '';
  display: block;
  width: 100%;
  border: 3px solid teal;
}

<div class="wrap">
  <a id="test" href="#">Some dummy-text for testing ...</a>
</div>

下划线出现并按预期消失。 但没有过渡。

我见过其他网站在这些浏览器（IE 11）上使用此类效果。所以它应该通常工作。

我做错了什么？

指定无悬停元素的转换是如何完成的。据我所知......

Answer 1

这是因为您在content州之前未添加:hover。

您应该在初始状态下尽可能多地定义，并且只更改:hover状态所需的属性。

尝试

#test:after {
  content: "";
  display: block;
  width: 0;
  transition: all 3s;
}

＆＃13;

.wrap {
  margin: 10px auto;
  width: 600px;
}
#test {
  text-decoration: none;
}
#test:after {
  content: "";
  display: block;
  width: 0;
  transition: all 3s;
  border: 3px solid transparent;
}
#test:hover:after {
  width: 100%;
  border: 3px solid teal;
}

＆＃13;

<div class="wrap">
  <a id="test" href="#">Some dummy-text for testing ...</a>
</div>

＆＃13;

Answer 2

享受这就是你所需要的东西=）

.wrap {
  margin: 10px auto;
  width: 600px;
}

#test {
  text-decoration: none;
  position:relative;
}

#test:after {
    background-color: #98004a;
    bottom: -10px;
    content: "";
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    transition: all 1s ease 0s;
    width: 0;
}

#test:hover:after {
  width: 100%;
}

<div class="wrap">
  <a id="test" href="#">Some dummy-text for testing ...</a>
</div>

CSS-Transition不适用于伪元素

2 个答案: