之后在css中获取文本内容

Question

给出此HTML：

<span data-title="Attribution">test</span>    

我可以在CSS after中使用它来检索data-title

span:after{ content: attr(data-title); }

但是我需要的是跨度文本内容，在上面的示例test中，是否可以在CSS after中获得它？

Answer 1

我不知道通过CSS获取html元素的内部文本的任何方法。在某些时候必须使用Javascript，但是，例如，您可以使用Javascript为跨度设置一个属性，然后使用CSS读取该属性-

var elems = document.getElementsByTagName("span");

for(var i = 0; i < elems.length; i++) {
  var mytext = elems[i].innerText;
  elems[i].dataset.trunc = mytext;
}

span:before {
  content: attr(data-trunc);
  color: red;
}

<span>Some-Text</span>
<span>More-Text</span>
<span>Other-Text</span>