html - CSS链接悬停动画

Question

我正在尝试复制 Codrops have here 的动画. (示例 11，在蓝色背景上)。

我遵循了他们的 CSS，但是我得到了一个奇怪的结果，文本堆叠并且在悬停时显示不正确。您可以在 this JSFiddle 中看到它的发生.

HTML 仅供引用:

<div id="content" class="small-12 columns the-posts">
    <article id="post-162" class="post-162 post type-post status-publish format-standard hentry category-uncategorized row">
        <a href="http://localhost/pondera_v3/uncategorized/test-post-6/" rel="bookmark" title="Test Post 6" class="post-title" data-hover="Test Post 6">Test Post 6</a>
    </article>
</div>

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

我玩过 overflow 但解决方案是在暗示我!有人可以指出我哪里出错了吗？

Answer 1

你可以添加一个 max-height 这样溢出线也被隐藏了:

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

查看演示 http://jsfiddle.net/abnUE/2/

编辑

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

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

新演示 http://jsfiddle.net/abnUE/7/