内容删除后，HTML / CSS伪元素移动到下一行

Question

我正在学习HTML + CSS，我正在尝试在HTML / CSS中编写控制台模拟器。我有伪元素:: after的问题。我有<pre class="commands" contenteditable id="0"></pre>，编辑命令的可编辑行是什么。我可以点击这一行并写一些东西，但当我写一些东西，例如“a”并删除它，我的“提示”（我认为这是英语中的好词）进入下一行，但它应该保留。如何防止这种情况？

我的代码：

  

错误404

Answer 1

好吧，我找到了问题的原因，firefox在<br>标记中添加了<pre>，我不明白为什么，它在chrome中都没有发生，您的快速解决方案是：

pre br {
    display: none;
}

＆＃13;

＆＃13;

$(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);
}
});

＆＃13;

*{
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;