计算 div 的高度并将该数字放在 ::after 伪元素内容中

Question

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

css 中的主要思想是：

div:before {content:"the height of this container is X pixels tall";}

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)

计算 div 的高度并将该数字放在 ::after 伪元素内容中

Calculate height of div and place that number in ::after pseudo element content

css

pseudo-element