@property --pointerColor {

  syntax: '<color>';

  inherits: false;

  initial-value: #000;

}

​

body, html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #fff;

}

​

​

div {

    position: relative;

    display: inline;

    margin: auto;

    width: max(500px, 40vw);

    font-size: 26px;

    line-height: 1.25;

}

​

p {

    padding: 4px 8px;

    border: 1px solid #000;

    display: inline-block;

}

​

a {

    background: linear-gradient(90deg, transparent, transparent calc(100% - 2px), var(--pointerColor) calc(100% - 2px), var(--pointerColor));

    background-size: 100% 70%;

    background-position: 0 5px;

    background-repeat: no-repeat;

    animation: colorChange .8s linear infinite;

    padding-right: 4px;

}

​

@keyframes colorChange {

    0%, 40% {

        --pointerColor: #000

    }

    60%, 100% {

        --pointerColor: transparent;

    }

}

const text = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius maxime, eum nulla dolor quisquam soluta unde, necessitatibus veritatis consequuntur modi ipsam ad omnis! Porro incidunt repellat voluptatem deserunt asperiores tempora.Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius maxime, eum nulla dolor quisquam soluta unde, necessitatibus veritatis consequuntur modi ipsam ad omnis! Porro incidunt repellat voluptatem deserunt asperiores tempora.';

const contentElement = document.getElementById('content');

let index = 0;

​

function addNextCharacter() {

  if (index < text.length) {

    contentElement.textContent += text[index];

    index++;

    setTimeout(addNextCharacter, Math.random() * 150 + 30);

  }

}

​

addNextCharacter();