css scale3d translate3d for tooltip effect

Question

我正在尝试执行工具提示效果，如以下链接所示：http://tympanus.net/Development/TooltipStylesInspiration/line.html

我在JSfiddle上有以下源代码：http://jsfiddle.net/0b5gpLko/

由于我没有完全按照单词完成教程，我想知道是否有办法隐藏元素.inner，直到它超出白条.text{ border-bottom }。

谢谢

Answer 1

只需将overflow: hidden;添加到.text，就像这样

.text {
    width: 280px;
    display: block;
    border-bottom: 10px solid #ffffff;
    transition: transform .3s .2s;
    transform: scale3d(0,1,1);
    text-align: center;
    overflow: hidden;
}

<强> Fiddle