Estoy tratando de crear un efecto en el que un círculo sigue al nuevo texto ingresado
Como: cuando escribo 'H', el círculo está detrás de él, luego, cuando presiono 'e', el texto ahora visible es 'Él' pero el círculo está detrás de 'e' ahora. Y este proceso continúa.
El texto se ingresará en un <textarea> y este texto cubre la mitad de la página.
Este es un sitio web y, si es posible, proporcione las respuestas con HTML, CSS y Vanilla JS, ya que no he aprendido JQuery ni ningún otro marco, biblioteca, etc.
En un elemento de área de texto, creo que no es posible sin más preámbulos. Pero puede usar un elemento de entrada en su lugar. He construido un pequeño prototipo que te muestra cómo hacerlo.
const op = document.querySelector('.output'); function make() { const ta = document.querySelector('#textarea input'); op.innerHTML = ta.value; const nw = ta.value.length < 1 ? 1: ta.value.length; ta.size= parseInt(nw); } .w { text-align: center; } .output { background: lightgray; font-size: 10px; border-radius: 25px; padding:5px; margin-bottom: auto; } #textarea{ border:1px solid #eee; display: flex; gap: 10px; } #textarea input{ border:none; background:none; font-size:1.2em; padding:6px; } #textarea input:focus{ outline:none; } <div id="textarea" oninput="make()"> <input size="1" type="text" value=""/> <div class="output"></div> </div>