<div class="wrapper">
    <h1>Hyperlink :hover CSS Animations</h1>
    <ol>
        <li>
            <a href="#" class="linkEffect linkEffect--insideOut">Underline - Inside out</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--rightToLeft">Underline - Right to Left</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--leftToRight">Underline - Left to Right</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--bounceDown">Underline - Bounce down</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--bgRightToLeft">Background color - Right to Left</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--bgLeftToRight">Background color - Left to Right</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--bgBottomToTop">Background color - Bottom to Top</a>
        </li>
        <li>
            <a href="#" class="linkEffect linkEffect--bgTopToBottom">Background color - Top to Bottom</a>
        </li>
    </ol>
</div>

.linkEffect {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

/* Effect one: Underline - Inside Out */
.linkEffect--insideOut::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -1px;
    left: 50%;
    background-color: white;
    transition: width 0.3s ease, left 0.3s ease;
}

.linkEffect--insideOut:hover::before {
    width: 100%;
    left: 0;
}

/* Effect two: Underline - Right to Left */
.linkEffect--rightToLeft::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -1px;
    right: 100%;
    background-color: white;
    transition: width 0.3s ease, right 0.3s ease;
}

.linkEffect--rightToLeft:hover::after {
    width: 100%;
    right: 0;
}

/* Effect three: Underline - Left to Right */
.linkEffect--leftToRight::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -1px;
    left: 100%;
    background-color: white;
    transition: width 0.3s ease, left 0.3s ease;
}

.linkEffect--leftToRight:hover::after {
    width: 100%;
    left: 0;
}

/* Effect four: Underline - Bounce Down */
.linkEffect--bounceDown {
    padding: 0 0 4px 0;
    border-bottom: 2px solid #21242C;
    transition: border-color 0.3s ease, padding-bottom 0.3s ease;
}

.linkEffect--bounceDown:hover {
    padding-bottom: 6px;
    border-color: white;
}

/* Effect five: Background color - Right to Left */
.linkEffect--bgRightToLeft {
    padding: 0 5px;
    box-shadow: inset 0 0 0 0 white;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.linkEffect--bgRightToLeft:hover {
    box-shadow: inset -300px 0 0 0 white;
    color: #21242C;
}

/* Effect six: Background color - Left to Right */
.linkEffect--bgLeftToRight {
    padding: 0 5px;
    box-shadow: inset 0 0 0 0 white;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.linkEffect--bgLeftToRight:hover {
    box-shadow: inset 300px 0 0 0 white;
    color: #21242C;
}

/* Effect seven: Background color - Bottom to Top */
.linkEffect--bgBottomToTop {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.5s ease, color 0.3s ease;
}

.linkEffect--bgBottomToTop::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    background-color: white;
    transition: top 0.5s ease;
    z-index: -1;
}

.linkEffect--bgBottomToTop:hover::after {
    top: 0;
}

.linkEffect--bgBottomToTop:hover {
    color: #21242C;
}

/* Effect eight: Background color - Top to Bottom */
.linkEffect--bgTopToBottom {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.5s ease, color 0.3s ease;
}

.linkEffect--bgTopToBottom::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 100%;
    left: 0;
    background-color: white;
    transition: bottom 0.5s ease;
    z-index: -1;
}

.linkEffect--bgTopToBottom:hover::after {
    bottom: 0;
}

.linkEffect--bgTopToBottom:hover {
    color: #21242C;
}


/*
 *
 * OPTIONAL DEMO STYLES
 *
 *
*/

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: #21242C;
    color: white;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

ol, li {
    margin: 0;
    padding: 0;
}

li {
    padding: 12px;
}

.wrapper {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}