:empty伪类结合::before可为空元素插入提示。例如，.editable-placeholder:empty::before { content: "请输入内容..."; } 在无内容时显示提示，输入后自动消失。应用场景包括编辑器、留言列表、输入框等。注意元素必须完全为空，含空格或换行则不触发。样式由CSS控制，避免影响内容结构。
当元素内部没有任何内容时，CSS 的 :empty 伪类可以检测到这一点，结合 ::before 伪元素，就能在空元素中插入提示文字。这种技术常用于表单字段、内容容器等场景，提升用户体验。
:empty 匹配完全没有子元素、文本内容（包括空格）的元素。::before 可以在其内容前插入生成的内容。两者结合，可以在元素为空时自动显示提示信息。
注意：只要元素内包含空格、换行或注释，:empty 就不会匹配。确保元素真正“空”才能生效。
示例：为一个可编辑区域添加“请输入内容”的提示：
立即学习“前端免费学习笔记（深入）”；
.editable-placeholder:empty::before {
content: "请输入内容...";
color: #999;
font-style: italic;
}<div class="editable-placeholder"></div>
当用户未输入内容时，会显示灰色斜体提示；一旦输入内容，伪元素自动消失。
基本上就这些。不复杂但容易忽略细节。
以上就是CSS伪类:empty与::before结合如何制作占位提示_使用:empty ::before显示提示文字的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
949
收藏
