html - 之后在css中获取文本内容

Question

给定这个 HTML:

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

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

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

但是我需要的是跨度文本内容，在上面的例子test中，是否可以在CSSafter中获取？

Answer 1

我不知道有什么方法可以通过 CSS 获取 html 元素的内部文本。在某些时候必须使用 Javascript，但是，例如，您可以使用 Javascript 为您的 span 设置一个属性并使用 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>