Html CSS链接悬停动画

我试图复制的动画。（示例11，蓝色背景上）

我遵循了他们的CSS，但我得到了一个奇怪的结果，文本堆栈，并没有正确地显示在悬停。你可以看到它在中国发生

此处的HTML仅供参考：

下面是CSS：

.the-posts article a.post-title {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-family: arial, helvetica;
    text-decoration: none;
    font-size: 29px;
}
.the-posts article a.post-title::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    max-width: 0;
    color: #86a63e;
    content: attr(data-hover);
    -webkit-transition: max-width 0.5s;
    -moz-transition: max-width 0.5s;
    transition: max-width 0.5s;
}

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before {
    max-width: 100%;
}

---

我玩过

溢出

，但解决方案暗指我！有人能指出我错在哪里吗？

添加

高度：29px内部
。文章a.post-title:：before

添加
高度：29px内部
。文章a.post-title:：before

您可以添加一个
最大高度
，这样溢出线也会隐藏：

.the-posts article a.post-title::before {    
  max-height:29px;
}

查看演示

编辑

现在来解决您的评论问题。将此css添加到
max height
上

.the-posts article a.post-title::before {    
  height:0;
}

在悬停中：

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before {
height:100%;
}

新演示
您可以添加
最大高度
，这样溢出线也会隐藏：

.the-posts article a.post-title::before {    
  max-height:29px;
}

查看演示

编辑

现在来解决您的评论问题。将此css添加到
max height
上

.the-posts article a.post-title::before {    
  height:0;
}

在悬停中：

.the-posts article a.post-title:hover::before, .the-posts article a.post-title:focus::before {
height:100%;
}

新演示与Danko和Felipe的基本答案相同，只是我使用了

max-height: 1em; 

必须将其添加到“.post文章a.post-title”和“.posts文章a.post-title:hover:：before，.posts文章a.post-title:focus:：before”，因为当我停止悬停时，它出现了与之前相同的问题，文本显示在下面

编辑：我看到我的错误，我首先添加到错误的CSS。仅添加到“.ThePosts文章a.post-title:hover:：before.”中，.ThePosts文章a.post-title:focus:：before”修复了初始悬停时的问题，但在停止悬停时仍然存在问题。只需添加到“.post文章a.post-title”就可以解决这两个问题。
与Danko和Felipe的基本答案相同，只是我使用了

max-height: 1em; 

必须将其添加到“.post文章a.post-title”和“.posts文章a.post-title:hover:：before，.posts文章a.post-title:focus:：before”，因为当我停止悬停时，它出现了与之前相同的问题，文本显示在下面

编辑：我看到我的错误，我首先添加到错误的CSS。仅添加到“.ThePosts文章a.post-title:hover:：before.”中，.ThePosts文章a.post-title:focus:：before”修复了初始悬停时的问题，但在停止悬停时仍然存在问题。只需添加到“.post文章a.post-title”就可以解决这两个问题。
只需将此添加到您的锚中即可。原作就是这样做的

overflow:hidden;

只需将此添加到您的锚中即可。原作就是这样做的

overflow:hidden;

文本无法放入宽度为0的区域，因此换行。它将继续缠绕，直到该区域足够宽，使其无法缠绕。这就是你看到它这样做的原因。你的文本无法放入一个宽度为0的区域，因此换行。它将继续缠绕，直到该区域足够宽，使其无法缠绕。这就是为什么你看到它这么做。