CSS : Multiline header background hover

<style type="text/css">

.container {
    width: 50px;
}

h1 > span {
    display: inline-block;
    position: relative;
}

h1 > span:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: crimson;
    z-index: -1;
    -webkit-transition: height 0.25s;
    -moz-transition: height 0.25s;
    -ms-transition: height 0.25s;
    -o-transition: height 0.25s;
    transition: height 0.25s;
}

h1:hover > span:before {
    height: 100%;
}

</style>

<div class="container">
    <h1>
        <span>Hello</span> <span>World</span>
    </h1>
</div>


Output :)

1)

2)