CSS聚焦时隐藏占位文本失效，div:focus:before写法存在什么问题？

问题描述 #

我尝试通过以下CSS代码实现元素聚焦时隐藏占位文本：

div:empty:not(:focus):before {
          content: attr(data-text);
      }
      div:focus:before {
          content: "";
      }

对应的HTML结构为：

<div data-text="placeholder text..."></div>

当前占位文本可通过CSS正常显示，但点击div元素时，占位文本并未隐藏。请问这种使用div:focus:before的方式存在什么问题？

核心原因 #

普通<div>默认不支持:focus伪类——它本身不属于可聚焦元素，点击时不会触发聚焦状态，所以div:focus:before的样式根本不会生效。

解决办法 #

有两种简单的修正方式：

• 添加tabindex属性：让div具备聚焦能力，取值0（支持tab键顺序聚焦）或-1（仅支持点击/JS触发聚焦）
  修改后的HTML：

  <div data-text="placeholder text..." tabindex="0"></div>
  

• 设置contenteditable：如果这个div需要用户输入内容，直接设为可编辑元素，它会自动获得聚焦能力
  修改后的HTML：

  <div data-text="placeholder text..." contenteditable="true"></div>
  

额外优化 #

可以给聚焦状态添加outline样式，让用户直观感知元素已聚焦：

div:focus {
  outline: 1px solid #007bff;
}

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