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

此外，有没有办法在我的链接上使用“data-hover”属性来实现此结果？或者只是自动填写该属性的方法？要为每个链接手动输入它只是一件痛苦。

Answer 1

我认为这就是你要找的东西。父项需要设置为relative而不是absolute，以便它可以包含由:: before创建的绝对子元素。将子项绝对正确定位并为宽度设置动画而不是max-width，起作用。如果不在数据库中使用数据悬停，你就不能这样做。

（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>

链接效果的反向转换

1 个答案: