CSS 文本上的伪元素在换行后消失

Question

我在所有 link 中添加了一个“:after”元素（模拟一个 "border-bottom"），所以在“:hover”上我可以为这个伪元素添加动画（"height: 100%"）。这工作正常，但是当 link 被换行符分割时，伪元素在换行符之后被破坏。

a {
  color: red;
  position: relative;
  text-decoration: none;

&:after {
  transition: height .1s;
  background-color: red;
  bottom: -3px;
  content: '';
  display: inline;
  height: 3px;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}

&:hover:after {
  height: calc(100% + 4px);
}

&:hover {
    color: white;
  }
}

这是一支笔：

http://codepen.io/herrfischer/pen/YWKmQJ

知道我做错了什么吗？

Answer 1

对于行内元素，背景会更高效：http://codepen.io/gc-nomade/pen/pbzMYP

a {
  color: red;
  position: relative;
  text-decoration: none;
  background:linear-gradient(red,red) bottom repeat-x;
  background-size:3px 3px;
  transition:1s;

  &:hover {
    background-size:100% 100%;
    color: white;
  }
}

Answer 2

从其他网站盗用 - 它适用于动画背景渐变 :)

a {
  background-image: linear-gradient(red 0%, red 100%);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 0 0;
  border-bottom: 3px solid red;
  color: red;
  position: relative;
  text-decoration: none;
  transition: 150ms ease;

      &:hover {
          color: white;
          background-size: 1em 1.5em;
      }
  }

更新了笔。

CSS 文本上的伪元素在换行后消失

CSS pseudo element on text disappears after line-break

css

sass

pseudo-element