css - 计算 div 的高度并将该数字放在::伪元素内容之后

Question

我正在尝试使用伪元素显示 div 的实际高度。

css 的主要思想是:

div:before {content:"这个容器的高度是 X 像素高";}

X 会使用 css 或 jquery 以某种方式计算吗？此文本将显示在 div 旁边。

Answer 1

这样吗？

document.querySelectorAll('.SizDiv').forEach(xDiv=>{
  xDiv.dataset.info = `_height=${xDiv.offsetHeight}px_`
})

/* first proposal:
const myDiv = document.querySelector('#my-Div')
myDiv.dataset.info = `the height of this container is ${myDiv.offsetHeight} pixels tall `
*/

.SizDiv {
  width           : 300px;
  background-color: orangered;
  margin          : 10px;
}

.SizDiv:before {
   content   : attr(data-info);
   color     : darkblue;
   font-size : 0.8em;
}

<div class="SizDiv" data-info="" >
  <br> B<br> C<br> D<br> E<br> F<br> G<br> H
</div>

<div class="SizDiv" data-info="" >
  <br> B<br> C<br> D<br> G<br> J
</div>

<div class="SizDiv" data-info="" >
 <br> B<br> C<br> K
</div>

这段代码引用:
HTML data attributes
CSS content (::before/after
Javascript dataset (for html data attributes)