CODEWITHSUNDEEP
htmlcsspseudo-element
Jeremy Clarkson
Jeremy Clarkson

Reputation: 165

HTML/CSS pseudo-element move to the next line after content remove

I am learning HTML + CSS and I am trying write console simulator in HTML/CSS. I have problem with pseudo-element ::after. I have <pre class="commands" contenteditable id="0"></pre>, what is editable line to write commands. I can click on this line and write something, but when i write something e.g. "a" and remove it, my "prompt" (i think it's good word in English) goes to the next line, but it should stay. How to prevent this?

My code:

ERROR 404

Upvotes: 1

Views: 642

Answers (1)

Pedram
Pedram

Reputation: 16575

well, i found cause of your problem, firefox add a <br> in your <pre> tag, i have no idea why, it not happend in chrome anyway, your quick solution is:

pre br {
    display: none;
}


$(document).ready(function(){
  var line=0;
  var type=document.getElementById(line); 
  var currentIndex=0;

var start=function(text){
  currentIndex=0;
  var interval=setInterval(function(){
    if(text.length>currentIndex){
      type.textContent+=text[currentIndex];
      currentIndex++;
    }
    else{clearInterval(interval);}
  },100
  );
}

//start("How are you today?");

$(document).keypress(function(e){
  console.log(e.keyCode);
    switch(e.keyCode){
      case 13: newLine(); break;
      case 38: start(" Mateusz."); break;}
});

var newLine=function(){
  line++;
  $("#console").append('<div class="prompt">$</div><pre class="commands" id="'+line+'"></pre>');
  type=document.getElementById(line);
}
});
*{
  border: 1px dashed gold;
}

pre br {
    display: none;
}

#console{
  background-color: black;
  width: 600px;
  height: 400px;
  left: 0;
  right: 0;
  margin: auto;
  border: 10px solid silver;
  padding: 10px;
  overflow-x: scroll;
}

.prompt{
  color: green;
  font-weight: bold;
  font-family: monospace;
  font-size: 14px;
  display: block;
}

.prompt::before{
  content: 'root@xubuntu ~ ';
  color: lime;
}

.commands{
  color: white;
  display: inline;
  font-family: monospace;
  font-size: 14px;
}

.commands::after{
  content: "|";
  color: white;
  width: 1px;
  height: 1px;
  background-color: white;
  /*border: 1px solid white;*/
  animation-name: ps1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  display: inline;
}

@keyframes ps1{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="console">
  <div class="prompt">$</div>
  <pre class="commands" contenteditable id="0"></pre>
</div>

Upvotes: 1

Related Questions