CODEWITHSUNDEEP
javascriptcss
Magdalena Pasek
Magdalena Pasek

Reputation: 13

How can I position an element at the end of some text?

I have an element that I would like to keep constantly positioned at the end of a string of text, as if it's a blinking I-shaped cursor you see when typing.

However, it will currently only sit directly below the text.

I have tried display: flex, float: left and display: block but none of those worked.

Here is my code:

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>

Upvotes: 0

Views: 700

Answers (1)

Ryan Walls
Ryan Walls

Reputation: 191

You could just make use of the ::after selector to create the blinking cursor. That way it will always sit after the last character, like so:

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>

Upvotes: 2

Related Questions