链接效果的反向过渡

Question

我正在尝试为我的链接获得特定的效果。我希望我的超链接有一种颜色的文本和另一种颜色的下划线。然后在悬停时，我希望使用动画反转颜色。

到目前为止，我只能使用 CSS 来转换这两种颜色，但它们都是从左到右的。我希望下划线从右到左。

这是我目前所得到的：

.entry-content a {
    position: absolute;
    padding: 0px 0;
    border-bottom: 2px solid #009999;
    color: #111111;
    text-shadow: none;
} 

.entry-content a::before {
    position: absolute;
    overflow: hidden;
    padding: 0px 0;
    max-width: 0;
    border-bottom: 2px solid #111111;
    color: #009999;
    content: attr(data-hover);
    -webkit-transition: max-width 0.2s;
    -moz-transition: max-width 0.2s;
    transition: max-width 0.2s;
}

.entry-content a:hover::before,
.entry-content a:focus::before {
    max-width: 100%;
}

另外，有没有什么方法可以在不使用我的链接上的“数据悬停”属性的情况下实现这个结果？还是一种自动填写该属性的方法？每个链接都必须手动输入，这很痛苦。

Answer 1

我认为这就是您要寻找的。需要将父元素设置为相对而不是绝对，以便它可以包含由 ::before 创建的绝对子元素。将孩子放在绝对正确的位置并为宽度而不是最大宽度设置动画效果。不，你不能在你的 CSS 中不使用 data-hover 来做到这一点。

(Demo)

.entry-content a {
  position: relative;
  padding: 0px 0;
  border-bottom: 2px solid #009999;
  color: #111111;
  text-shadow: none;
  text-decoration: none;
}
.entry-content a::before {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: -2px;
  width: 0;
  border-bottom: 2px solid #111111;
  color: #009999;
  content: attr(data-hover);
  -webkit-transition: width 0.2s;
  -moz-transition: width 0.2s;
  transition: width 0.2s;
}
.entry-content a:hover::before,
.entry-content a:focus::before {
  width: 100%;
}

<div class="entry-content" data-hover="A really long link">
  <a href="#">A really long Link</a>
</div>