我嘗試使用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;
}