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

Question

我希望在伪元素中显示元素的宽度。

所以我的 CSS 看起来像

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

但我不知道仅使用 CSS 是否可行。

如果没有，我该如何使用 jQuery 来实现？

Answer 1

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

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

例如:

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>