使用 css 在文本上方呈现元数据

Question

给定带有词性分类标记的文本，我想知道是否有任何方法可以使用 css 可视化此元数据？例如，句子Ten pins were set in order.解析（在 Spacy 中）为：

  token pos  
1 Ten   NUM  
2 pins  NOUN 
3 were  AUX  
4 set   VERB 
5 in    ADP  
6 order NOUN 
7 .     PUNCT

我可以在 html 中呈现它，例如：

  token pos  
1 Ten   NUM  
2 pins  NOUN 
3 were  AUX  
4 set   VERB 
5 in    ADP  
6 order NOUN 
7 .     PUNCT

看起来像这样（注意title属性的使用由“pins”上的（不可见）鼠标悬停演示）：

这需要交互性来探索元数据。我想知道是否有任何 css 方法可以使所有标签的标题/其他属性永久可见？优选地，细节将在单词上方或下方呈现偏移。

Answer 1

使用 css 伪元素：

span:before {
  content: attr(title); /* Put the value of the title attribute as text */
  position: absolute;
  transform: translate(offsetX, offsetY); /* find the correct offset here */
}