CSS变量设置::before伪元素height失效，其余属性正常如何解决？

你定义的--red_H是基于--red_W: 80%计算得到的，百分比单位的CSS属性计算依赖对应父元素的基准值：

• 宽度的百分比基准是父元素的宽度，块级元素默认宽度撑满父级，存在明确的计算基准，所以宽度可以正常生效
• 高度的百分比要求父元素必须有显式设置的固定高度作为计算基准，你代码里的.inside和.bottomline都没有设置固定高度，所以--red_H计算结果为无效值，伪元素高度最终为0。

这里提供3种常用的可行方案，按需选择即可：

• 方案1：给父元素设置固定高度
  直接给.bottomline或.inside设置明确的高度值，为百分比高度提供计算基准：

  .bottomline {
    margin-top: var(--red_H);
    text-align: center;
    border-top: 10px solid green;
    height: 100px; /* 可根据业务需求调整数值 */
  }
  

• 方案2：修改宽度变量的单位
  把--red_W的单位换成不依赖父元素宽度的单位（如vw、px），高度计算就不会受父元素高度限制：

  html {
    --red_W: 80vw; /* 相对于视口宽度的80%，和父元素属性无关 */
    --red_H: calc(var(--red_W) / 4);
    --red_H_neg: calc(var(--red_H) * -1);
  }
  

• 方案3：用padding模拟比例高度
  padding的百分比基准是父元素的宽度，不需要父元素有固定高度，刚好适配你等比例设置高度的需求：

  .inside::before{
    content: '';
    background-color: red;
    width: var(--red_W);
    height: 0;
    padding-top: 25%; /* 对应宽高比4:1，和你原本calc(var(--red_W)/4)的比例完全一致 */
    margin: var(--red_H_neg) auto 0;
    display: block;
    position: relative;
  }
  

内容的提问来源于stack exchange，提问作者Lore