伪元素默认为 inline，不支持宽高及上下 margin，需设 display: block 或 inline-block 才生效；content 属性必不可少；定位时需配合 position 且父元素设 relative；还需排查 overflow、样式覆盖及透明度干扰。
伪元素（如 ::before 和 ::after）默认是 inline 的，而 inline 元素不支持设置宽高、上下 margin 和 padding（垂直方向的 padding 会渲染，但不影响布局流），所以直接设 width 或 height 没效果。
这是最常用也最直接的解法。只要改变其 display 类型，宽高就能生效：
display: block; —— 独占一行，宽高、内外边距完全可控display: inline-block; —— 保留在行内流中，同时支持宽高和垂直对齐例如：
.box::before {伪元素没有 content 就不会被渲染，无论 display 设成什么都没用。哪怕只是空字符串 content: ''; 也必须写。
立即学习“前端免费学习笔记（深入）”；
如果想用伪元素做装饰块（比如小圆点、三角箭头），常配合 position: absolute; 使用。此时仍需先设 display: block（或 inline-block），否则宽高无效；再通过 top/left 等定位。
注意：父元素最好设 position: relative; 来作为定位参考。
overflow: hidden，且伪元素溢出被裁剪*::before, *::after { display: inline; }）visibility: hidden 或 opacity: 0 误以为“没显示”，其实是透明了以上就是css伪元素宽高不生效怎么办_将其设为block或inline block的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
收藏
