带::after伪元素的空行span光标位置异常的纯HTML/CSS方案咨询

步骤1：修改CSS样式 #

调整.line元素的布局并重新定位换行标识：

#rich-text {
  position: relative;
}

.space {
  pointer-events: none;
  display: inline-block;
  background: radial-gradient(circle, currentColor, rgba(0,0,0,0) 2px);
}

#rich-text .line .error::after {
  content: "⛔";
  background-color: transparent;
  position: absolute;
  right: 8px;
}

/* 核心修改 */
.line {
  display: block;
  position: relative;
  min-height: 1em; /* 确保空行可点击 */
  padding-right: 1em; /* 为右侧的¬符号预留空间 */
}

.line:after {
  pointer-events: none;
  color: rgba(127,127,127,.33);
  content: "¬";
  position: absolute;
  right: 0;
  top: 0;
}

步骤2：简化HTML结构 #

移除<br>标签，因为块级.line元素会自动垂直堆叠：

<div id="rich-text" contenteditable="true">
  <span class="line">
    <span class="domain error" data-error-message="no spaces allowed in domains">bad<span class="space"> </span>filter</span>
  </span>
  <span class="line"></span>
</div>

效果说明 #

• 空行点击后，光标会定位在行的起始位置（左侧），符合预期。
• 换行标识¬始终显示在行的右侧，不会干扰光标或键盘导航。
• 非空行的内容会自动避开右侧的符号，避免重叠。

内容的提问来源于stack exchange，提问作者tuexss