CSS变量在高度为：：before [duplicate]时无效

vlurs2pr 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(158)

此问题已在此处有答案：

How to set a percentage height value in HTML/CSS（7个回答）
1年前关闭。
我尝试使用CSS变量来控制::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>

https://codepen.io/lorelorel/pen/wvqyLmy

css

来源：https://stackoverflow.com/questions/69856836/css-variable-not-working-with-height-of-before

1条答案

按热度按时间

yzuktlbb1#

@Paulie_D是正确的，你必须有一个可计算高度的父母，才能使用高度的百分比值。因为它是一个伪元素，所以需要定位的父元素是.inside元素。因此，为了明确如何修复它，您可以执行以下操作：

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;
}

赞(0）回复(0）举报 2023-06-07

我来回答

CSS变量在高度为：：before [duplicate]时无效

1条答案

相关问题

热门标签

最新问答