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

【问题标题】：CSS pseudo element on text disappears after line-break文本上的 CSS 伪元素在换行后消失
【发布时间】：2016-05-27 09:24:49
【问题描述】：

我在所有链接中添加一个“: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;
  }
}

这是一支笔：

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

知道我做错了什么吗？

【问题讨论】：

标签： css sass pseudo-element

【解决方案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;
  }
}

【讨论】：

这比我从其他网站偷的代码还要好，谢谢。
@HenningFischer 所以这些链接动画效果可能对你来说也很有趣...codepen.io/gc-nomade/pen/grRmBw codepen.io/gcyrillus/pen/yOzrxM
不错，我会记住这一点，以进行未来主义的网站设计......使用激光;)。

【解决方案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;
      }
  }

更新了笔。

【讨论】：