当前位置: 首页
前端开发
CSS为什么伪元素Before无法在Input元素上显示_针对替换元素改用容器包装法

CSS为什么伪元素Before无法在Input元素上显示_针对替换元素改用容器包装法

热心网友 时间:2026-04-25
转载

为什么伪元素Before无法在Input元素上显示?针对替换元素改用容器包装法

CSS为什么伪元素Before无法在Input元素上显示_针对替换元素改用容器包装法

免费影视、动漫、音乐、游戏、小说资源长期稳定更新! 👉 点此立即查看 👈

为什么 ::before 上完全不生效

这事儿其实挺让人困惑的:你明明写了样式,content 属性也设置了,可 前面就是死活不显示任何东西。问题根源不在于你的代码,而在于 本身是一个“替换元素”。

所谓替换元素,简单说就是它的内容渲染不由 CSS 盒模型直接控制,而是由浏览器(或操作系统)的原生控件接管。CSS 规范白纸黑字地写着:::before::after 这类伪元素,禁止作用于替换元素。所以,无论你加上 !important,还是尝试修改 display 属性,DOM 里压根就不会生成对应的伪节点——打开开发者工具看看,自然也就找不到踪迹。这不是浏览器的 bug,而是规则如此。

哪些元素属于同类型“伪元素失效区”

除了 ,前端开发中还有几个常见的“钉子户”,同样无法使用伪元素进行装饰: