位置：在父类和子类CSS之间的伪类之前

Question

（基本上我正在尝试将文本字段设置为超出其正常功能，包括不直接与光标交互的填充文本。）

我想知道是否可以在容器元素的子元素后面放置（如果可能，使用z-index）:before元素，但是在容器背景前面。 （也许你会稍微理解一下）

HTML：

<div class="field" data-title="John">
<input type="text" name="firstname">
</div>

CSS：

.field{
    background-color:white;
    border:1px solid gray;
}

.field:before{
    content:attr(data-title);
}

input[type="text"]{
    background-color:transparent;
    border:none;
    outline:none;
}

这显示正确：

但是，我担心的是，如果您的光标位于:before内容之上，则无法对文本字段进行聚焦（在这种情况下，单词为“John”）。

我确实理解:before可以使用pointer-events:none设置样式，但是，“指针事件”标记尚未完全跨浏览器兼容。

希望我清楚自己。任何帮助都将非常感谢。谢谢你的时间。