在使用可编辑div实现富文本输入或者自定义输入组件时，我们经常会通过:before伪元素来添加占位文本、装饰性图标等内容，但很多时候会出现点击div区域时无法正常获取输入焦点的情况，这大多是因为:before伪元素遮挡了可编辑div的点击区域导致的。
问题产生的原因
CSS中的:before伪元素默认会生成在一个元素的内部最前方，并且默认拥有position: static之外的定位属性时，会提升自身的层叠顺序。如果可编辑div本身没有做层叠相关的属性设置，伪元素就会覆盖在div的内容区域上方，当用户点击div时，实际点击到的是:before伪元素，自然无法触发div的输入焦点获取逻辑。
我们可以通过一个简单的示例复现这个问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.editable-div {
width: 300px;
height: 40px;
border: 1px solid #ccc;
outline: none;
}
.editable-div:before {
content: "请输入内容";
color: #999;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="editable-div" contenteditable="true"></div>
</body>
</html>
上面的代码中，:before伪元素设置了position: absolute，会脱离文档流覆盖在可编辑div上方，点击div时无法获取焦点。
解决方案
方案一：为可编辑div设置相对定位并提升层叠顺序
我们可以给可编辑div添加position: relative和z-index属性，让div本身的层叠顺序高于:before伪元素，这样点击时就会优先触发div的点击事件。
.editable-div {
width: 300px;
height: 40px;
border: 1px solid #ccc;
outline: none;
/* 添加相对定位并提升层叠顺序 */
position: relative;
z-index: 1;
}
.editable-div:before {
content: "请输入内容";
color: #999;
position: absolute;
left: 10px;
top: 10px;
/* 伪元素的z-index低于div本身 */
z-index: 0;
}
方案二：调整:before伪元素的指针事件属性
CSS的pointer-events属性可以控制元素是否响应鼠标事件，我们可以把:before伪元素的pointer-events设置为none，这样伪元素就不会拦截鼠标点击，点击操作会直接穿透到下方的可编辑div上。
.editable-div {
width: 300px;
height: 40px;
border: 1px solid #ccc;
outline: none;
position: relative;
}
.editable-div:before {
content: "请输入内容";
color: #999;
position: absolute;
left: 10px;
top: 10px;
/* 禁止伪元素响应指针事件 */
pointer-events: none;
}
方案三：通过内容判断动态显示伪元素
如果:before伪元素是用来做占位提示的，我们可以结合可编辑div的内容状态，在有内容时隐藏伪元素，避免伪元素长期存在遮挡输入区域。
.editable-div {
width: 300px;
height: 40px;
border: 1px solid #ccc;
outline: none;
position: relative;
}
/* 无内容时显示占位伪元素 */
.editable-div:empty:before {
content: "请输入内容";
color: #999;
position: absolute;
left: 10px;
top: 10px;
pointer-events: none;
}
/* 有内容时隐藏伪元素 */
.editable-div:not(:empty):before {
content: "";
}
方案对比
三种方案各有适用场景，我们可以通过下面的表格快速选择：
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 提升div层叠顺序 | 伪元素需要保留交互的场景 | 逻辑简单，兼容性好 | 需要调整z-index层级，避免和其他元素冲突 |
| 设置pointer-events为none | 伪元素仅做展示不需要交互 | 不需要调整层级，实现简单 | IE10及以下版本不支持该属性 |
| 动态显示伪元素 | 伪元素为占位提示场景 | 有内容时完全移除伪元素，无遮挡风险 | 仅适用于占位类伪元素场景 |
注意事项
- 如果可编辑div内部还有子元素，需要注意子元素的层叠顺序，避免子元素和伪元素产生新的遮挡问题。
- 使用
z-index属性时，需要确保父元素没有设置overflow: hidden等可能裁剪子元素的属性，否则层叠调整可能不生效。 - 如果项目中需要兼容低版本IE浏览器，优先选择提升div层叠顺序的方案，避免使用
pointer-events属性。
CSS_before可编辑_div输入焦点伪元素遮挡修改时间：2026-07-03 10:33:28