link 效果的反向过渡

Question

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

到目前为止，我只能使用 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%;
}

此外，有什么方法可以在不使用 link 上的 "data-hover" 属性的情况下实现此结果？还是一种自动填写该属性的方法？必须为每个 link.

手动输入它只是一种痛苦

Answer 1

我想这就是您要找的。 parent 需要设置为相对而不是绝对，以便它可以包含由 ::before 创建的绝对 child 元素。将 child 定位在绝对右侧并设置宽度而不是 max-width 的动画效果。不，如果不在 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>

link 效果的反向过渡

Reverse transition on link effect

css

hyperlink

transition