html - 在没有文本的 div 上使用字体大小将高度/其他属性的值传播到子元素

Question

我有这个simple CSS :

div {
  height: 50px;
  border-bottom: 1px solid black;
  position: relative;
}

div:before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background: green;
  position: absolute;
  top: 50px;
}

想法是绿色框位于底部边框的正下方。为此，我需要明确指定 top 属性。我正在考虑如何避免以像素为单位指定明确的度量并以某种方式从父级接收它。我能想到的唯一解决方案是在父级上指定 font-size 等于父级的高度，然后在子级中使用 em 引用它。所以下面的解决方案是可能的:

div {
  font-size: 50px; //equal to height
}

div:before {
  top: 1em;
}

这种方法有哪些明显的缺点？优点是可以将 greenbox div 添加到任意高度的父级，而无需更改 geenbox div 的 top 属性。

Answer 1

最简单的修复方法是使用 top: 100%，如下所示。

100% 值是根据父元素的高度计算的，所以最终结果是伪元素的顶部与父 block 的底部边缘对齐。

这种方法的优点是它适用于父 div 的任何高度值和伪元素的任何高度值。

div {
  height: 80px;
  border-bottom: 1px solid black;
  position: relative;
}

div:before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background: green;
  position: absolute;
  top: 100%;
}

 <div></div>