如何在':after'伪元素的内容中显示元素的宽度？

Question

我想在伪元素中显示元素的宽度.

所以我的CSS看起来像

:after {
    content: "{width goes here}";
    display:block;
}

但我不知道它是否只有CSS才有可能.

如果没有,我将如何使用jQuery？

Answer 1

目前单独使用CSS无法做到这一点.

您可以使用JavaScript迭代元素,并data-width根据元素的计算宽度设置自定义属性.在这样做时,您可以使用content值attr(data-width)来将此属性值显示为伪元素的内容.CSS attr()函数允许您检索元素的属性并显示值.

例如:

var elements = document.querySelectorAll('[data-width]');
for (var i = 0; i < elements.length; i++) {
  elements[i].dataset.width = elements[i].offsetWidth;
}

[data-width]:after {
  content: ' ' attr(data-width) 'px';
}
[data-width] {
  border: 1px solid;
}
div {
  width: 300px;
  height: 30px;
}

<div data-width></div>
<p data-width>Paragraph element</p>
<span data-width>Span</span>

由于该data-width属性仅设置一次,因此您需要添加一个resize事件侦听器,以便在更改时设置相应的宽度值.

例如:

window.addEventListener('resize', setDataWidth, true);
setDataWidth();

function setDataWidth() {
  var elements = document.querySelectorAll('[data-width]');
  for (var i = 0; i < elements.length; i++) {
    elements[i].dataset.width = elements[i].offsetWidth;
  }
}

[data-width]:after {
  content: ' ' attr(data-width)'px';
}
[data-width] {
  border: 1px solid;
}
div {
  width: 30%;
  height: 30px;
}

<div data-width></div>
<p data-width>Paragraph element</p>
<span data-width>Span</span>