html, body {

    width: 100vw;

    height: 100vh;

    font-family: monospace;

    padding: 20px;

}

​

p:hover  {

    animation-play-state: running;

}

​

p {

    position: relative;

    width: 26ch;

    color: #000;

    font-size: 48px;

    animation: typing 3s steps(15, end);

    animation-fill-mode: both;

    animation-play-state: paused;

    white-space: nowrap;

    overflow: hidden;

    cursor: pointer;

    &::before {

        position: absolute;

        content: "";

        width: 4px;

        top: 0;

        bottom: 0;

        right: 0;

        animation: blink .8s infinite;

    }

}

​

@keyframes blink {

    0%, 50% {

        border-right: 4px solid transparent;

    }

    50%, 100% {

        border-right: 4px solid #000;

    }

}

​

@keyframes typing {

    from {

        width: 11ch;

    }

    to {

        width: 26ch;

    }

}