1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
span {
    /* Sets a linear gradient as the background. The gradient moves from left to right, starting with #ec695c color and transitioning to #61c454 color. */
    background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;

    /* Initially sets the size of the background (gradient) to 0 width and 2px height, effectively hiding it initially. */
    background-size: 0 2px;

    /* Applies a transition effect to the background-size property, so changes in background-size will occur over 1300 milliseconds. */
    transition: background-size 1300ms;
}

span:hover {
    /* On hover, changes the starting position of the background (gradient) to the left. */
    background-position-x: left;

    /* On hover, changes the size of the background to 100% width and 2px height, making the gradient line visible under the span element. */
    background-size: 100% 2px;
}