body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

:root {
    --time-slot-length: 0.1s;
    --t1x: var(--time-slot-length);
    --t2x: calc(var(--time-slot-length) * 2);
    --t3x: calc(var(--time-slot-length) * 3);
    --t4x: calc(var(--time-slot-length) * 4);
    --color: dodgerblue;
}

nav ul {
    padding: 0;
}

nav ul li {
    color: white;
    list-style-type: none;
    font-family: sans-serif;
    text-transform: uppercase;
    width: 8em;
    height: 3em;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.1em;
    text-align: center;
    line-height: 3em;
    letter-spacing: 0.1em;
    position: relative;
    transition: var(--t4x); /* duration 4x */
    margin: 1em;
}

nav ul li:hover {
    color: var(--color);
    animation: pulse ease-out 1s var(--t4x); /* delay 4x */
}

nav ul li::before,
nav ul li::after {
    content: '';
    position: absolute;;
    width: 0;
    height: 0;
    border-radius: inherit;
    visibility: hidden;
}

nav ul li::before {
    top: -1px;
    left: -1px;
    border: 1px solid;
    border-color: var(--color) var(--color) transparent transparent;
    transition:
        height linear var(--t1x) var(--t2x), /* delay 2x */
        width linear var(--t1x) var(--t3x), /* delay 3x */
        visibility 0s var(--t4x); /* delay 4x */
}

nav ul li::after {
    bottom: -1px;
    right: -1px;
    border: 1px solid;
    border-color: transparent transparent var(--color) var(--color);
    transition:
        height linear var(--t1x),
        width linear var(--t1x) var(--t1x), /* delay 1x */
        visibility 0s var(--t2x);  /* delay 2x */
}

nav ul li:hover::before,
nav ul li:hover::after {
    width: 100%;
    height: 100%;
    visibility: visible;
}

nav ul li:hover::before {
    transition:
        visibility 0s,
        width linear var(--t1x),
        height linear var(--t1x) var(--t1x); /* delay 1x */
}

nav ul li:hover::after {
    transition: 
        visibility 0s var(--t2x), /* delay 2x */
        width linear var(--t1x) var(--t2x), /* delay 2x */
        height linear var(--t1x) var(--t3x); /* delay 3x */
}

@keyframes pulse {
    from {
        /* hsl(210, 100%, 56%) == dodgerblue */
        box-shadow: 0 0 hsla(210, 100%, 56%, 0.5);
    }

    to {
        box-shadow: 0 0 0 1em hsla(210, 100%, 56%, 0);
    }
}