javascript - 光标不在一个空的可编辑 anchor 中居中，在 Firefox 上具有文本对齐中心

Question

我有一些 anchor标签作为应用程序中的按钮 contenteditable设置为 true和 text-align设置为 center但如果 anchor 中没有文本，则光标应为 居中 作为 tex-align设置为 center它在 chrome 上按预期工作，但在 Firefox 上，当没有输入任何内容时，它会显示光标在最左边。
这是HTML代码:

.editable {
  display: block;
  color: red;
  border: 1px solid red;
  height: 100px;
  width: 100%;
  text-align: center;
}

<a class="editable" contenteditable>
</a>

我知道这是 Firefox 的一个错误，但有没有办法解决这个问题？

Answer 1

更新
添加了占位符功能并通过使用 attr() CSS function 使其更加通用.为了使它像占位符一样工作，有两个标准决定占位符的行为(至少在 HTML 输入或文本区域方面)

文本框为空时必须存在。 :empty

文本框处于焦点时不得出现。 :empty :not (:focus)

每个 anchor 都可以分配不同的占位符

<a contenteditable data-ph='Placeholder'></a>
<!--Assign tag data-ph attribute and placeholder text as value-->

a::before {
  content: attr(data-ph)
/* Add a pseudo-element ::before or ::after and use attr() function and data-ph 
as parameter */

客观的
行为:文本光标对齐 离开 在带有 text-align: center 的 contenteditable 元素内在空旷而专注的时候。
预期:文本光标对齐 中心 在带有 text-align: center 的 contenteditable 元素内在空旷而专注的时候。
纯 CSS 解决方案

分配 ::after pseudo-element锚定。

款式 ::after作为一个闪烁的光标。

设置 :empty 和 :focus ::after 上的伪选择器伪元素。

使用 caret-color: transparent 隐藏真实光标当 anchor 处于焦点且为空时。

分配 display: none至::after当 anchor 不为空时。

html {
  font: 300 10pt/1.2 'Segoe UI'
}

.edit {
  display: block;
  min-height: 100px;
  min-width: 100%;
  border: 1px solid red;
  font-size: 2rem;
  color: red;
  text-align: center;
}

.edit:empty:not(:focus)::before {
  content: attr(data-ph);
  font-style: italic;
  font-weight: bold;
  color: #ccc;
  letter-spacing: 0.2em;
  word-wrap: break-word;
}

.edit:focus::before {
  display: none;
}

.edit:focus:empty {
  caret-color: transparent;
}

.edit:focus:empty::after {
  content: "";
  display: inline-block;
  width: 0.1ch;
  height: 2.4rem;
  vertical-align: text-bottom;
  background: red;
  animation: blink 0.85s steps(2) infinite;
}

.edit:focus::after {
  display: none;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
}

<a class='edit' contenteditable data-ph='Placeholder'></a>
<a class='edit' contenteditable data-ph='🗼🏯🏨🏗️'></a>