Question

我在所有链接上添加一个“：after”元素（模拟“border-bottom”），依此类推“：hover”我可以为这个伪元素设置动画（“height：100％”）。这工作正常，但是当使用换行符拆分链接时，断行后伪元素将被破坏。

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;
  }
}

这是一支笔：

update

知道我做错了吗？

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伪元素消失

2 个答案: