Readmore箭头 - 悬停效果 - 在文本中滑动

Question

我的容器底部有一个箭头。在悬停时，我希望当readmore（lees meer）文本滑入时，箭头会向右移动。

州1：http://postimg.org/image/5ovuxrfdd/ （readmore文本不可见，溢出：隐藏）

州2：http://postimg.org/image/y5imixrbd/

我已经使用了一些CSS动画但是我在transform属性上使用了固定像素。我也想要这个响应。所以我需要一种更有活力的方法。

我希望没有JS就能解决这个问题。

Answer 1

.button {
display: block;
position: relative;
width: 200px;
height: 200px;
background: red;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:hover .readmore {
   transform: translate(0,0);
  margin-left: 0;
}

.readmore {
    position: absolute;
    left: 20px;
    bottom: 20px;
    transform: translate(-100%, 0);
    margin-left: -20px;
    transition: all 300ms ease-out;
}

.arrow {
    display: block;
    width: 20px;
    height: 20px;
    background: green;
    position: absolute;
    left: 100%;
    margin-left: 20px;
    top: -2px;
}

http://jsfiddle.net/nkfv9n6y/3/