我尝试使用CSS变量来定义a ::before元素的宽度、高度和边距。它对宽度和边距都有效，但是高度是0。

有办法解决吗？怎么了？

html {
  --red_W: 80%;
  --red_H: calc(var(--red_W) / 4);
  --red_H_neg: calc(var(--red_H) * -1);
}

.bottomline {
  margin-top: var(--red_H);
  text-align: center;
  border-top: 10px solid green;
}
.inside::before{
  content: '';
  background-color: red;
  width: var(--red_W);
  height: var(--red_H); /*this does not seem to work*/
  margin: var(--red_H_neg) auto 0;
  display: block;
  position: relative;
}

<div class="bottomline">
  <div class="inside">
  </div>    
</div>

@Paulie_D是正确的，为了使用身高的百分比值，必须有一个具有可计算身高的父母。因为它是一个伪元素，所以您需要定位的父元素是。内部元素。因此，为了明确如何修复它，您可以做如下事情:

html {
  --red_W: 80%;
  --red_H: calc(var(--red_W) / 4);
  --red_H_neg: calc(var(--red_H) * -1);
}

.bottomline {
  margin-top: var(--red_H);
  text-align: center;
  border-top: 10px solid green;
}
.inside {
  height: 50px;
}
.inside::before{
  content: '';
  background-color: red;
  width: 80%;
  height: 100px;
  margin: -100px auto 0;
  width: var(--red_W);
  height: var(--red_H); /*this does not seem to work*/
  margin: var(--red_H_neg) auto 0;
  display: block;
  position: relative;
}