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

Question

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

css中的主要思想是：

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

X将使用CSS或jquery-以某种方式计算出来？该文本将显示在div旁边。

Answer 1

以这种方式？

const myDiv = document.getElementById('myDiv')


myDiv.dataset.info = `the height of this container is ${myDiv.offsetHeight} pixels tall `

#myDiv {
  width: 400px;
  height: 200px;
  background-color: chartreuse;
}

#myDiv:before { content: attr(data-info); }

<div id="myDiv" data-info="somthing" > </div>