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

Question

我正在学习 HTML + CSS，我正在尝试在 HTML/CSS 中编写控制台模拟器。我对伪元素 ::after 有疑问。我有<pre class="commands" contenteditable id="0"></pre>，什么是可编辑的行来编写命令。我可以点击这一行并写一些东西，但是当我写一些东西时，例如"a" 并删除它，我的 "prompt" （我认为这是英文的好词）转到下一行，但它应该保留。如何预防？

我的代码：

ERROR 404

Answer 1

好吧，我找到了你的问题的原因，firefox 在你的 <pre> 标签中添加一个 <br>，我不知道为什么，它没有发生在 chrome无论如何，您的快速解决方案是：

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>

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

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

html

css

pseudo-element