Tengo un elemento que me gustaría mantener constantemente posicionado al final de una cadena de texto, como si fuera un cursor parpadeante en forma de I que ves al escribir.
Sin embargo, actualmente solo se ubicará directamente debajo del texto.
Probé display: flex , float: left y display: block pero ninguno funcionó.
Aquí está mi código:
function myFunction() { result.innerHTML += "I will not make any more boring art "; } body { background-color:white; font-family: Lucida Console Regular; font-size:15px; color:black; border-width:0px; border: 0; } input { font-size:15px; border-top-style: hidden; border-right-style: hidden; border-left-style: hidden; border-bottom-style: hidden; background-color: white; font-family: Lucida Console Regular; color: transparent; display: inline-block; } result{ display: flex; } .no-outline:focus { outline: none; } textarea:focus, input:focus{ outline: none; } .cursor { position: relative; float:left; flex:1; } .cursor i { flex:1; position: absolute; width: 1px; height: 100%; background-color: black; animation-name: blink; animation-duration: 800ms; animation-iteration-count: infinite; opacity: 1; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } <input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" > <div id="result"></div> <div class="cursor"> <input type="text" class="rq-form-element" /><i></i></div>Simplemente puede utilizar el selector ::after para crear el cursor parpadeante. De esa manera, siempre se colocará después del último carácter, así:
function myFunction() { result.innerHTML += "I will not make any more boring art "; } @import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Orbitron:wght@400;500&family=Play&display=swap'); body { font-family: 'Inconsolata', monospace; font-size:15px; } input { border: hidden; background-color: white; color: transparent; } #result::after { content: ''; border-right: 1px solid black; height: 100%; animation-name: blink; animation-duration: 800ms; animation-iteration-count: infinite; } textarea:focus, input:focus { outline: none; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } <input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" > <div id="result"></div> <div class="cursor"> <input type="text" class="rq-form-element" /><i></i> </div>