寻求标准Void类型HTML占位元素及实现技巧

推荐的标准Void元素方案 #

1. <img> 标签 #

<img>本身就是void类型元素（支持自闭合写法），可以添加类名/ID，能在<p>、<li>等行内上下文正常使用，完全满足你的占位符需求。只需要通过CSS隐藏它本身的占位空间，再用伪元素添加内容即可：

<p>表单内容 <img class="validated"></p>

对应的CSS实现：

/* 隐藏img自身的占位区域 */
.validated {
  display: inline-block;
  width: 0;
  height: 0;
  visibility: hidden;
}
/* 通过伪元素添加目标内容 */
.validated::after {
  content: "OK";
  float: right;
  visibility: visible;
}

2. <wbr> 标签 #

<wbr>是用于控制单词换行的轻量void元素，本身无任何默认视觉表现，非常适合做占位符，不需要额外隐藏样式，直接通过伪元素添加内容即可：

<li>列表项 <wbr class="validated"></li>

对应的CSS：

.validated::after {
  content: "OK";
  float: right;
}

业内常用替代技巧（非Void元素，但适配场景） #

如果可以放宽对void元素的硬性要求，<span>是最通用的占位符选择——虽然需要闭合标签，但HTML5中写法简洁，兼容性拉满，完全适配你的CSS/JS处理需求：

<p>表单内容 <span class="validated"></span></p>

CSS代码和上述示例一致，无需额外调整。

内容的提问来源于stack exchange，提问作者Emile D.