Question

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

所以我的CSS看起来像

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

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

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

Answer 1

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

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

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

例如：

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: