<div class="shape-ex2">
    滑鼠移動至此查看效果
    <div class="shape-ex2-line" ></div>
</div>
.shape-ex2{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.shape-ex2-line{
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.shape-ex2:hover .shape-ex2-line{
    width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.