javascript - 使用 css 将 html 属性放在输出中？

Question

是否可以在 html 的输出中可视化地显示通常只存在于源代码中的 html 属性，并锚定到它们所属的元素？

例如，这里有一些 css，它在视觉上将一些 <span></span> 分组为清楚起见，圆 Angular 矩形中的标签:

span{
    display:inline-block;
}

span:first-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}
span:last-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}

<span class="complete-sentence">She <span class="verb">loves</span> him a <span>lot</span>.</span>

https://jsfiddle.net/ycpw4tzz/ <-- 当前发生了什么。

其中两个 span 标签具有“subject”和“verb”类(全局属性)。我想以某种方式让输出显示看起来像这样，而不是它当前的样子。

Answer 1

首先，不要尝试使用不适合这种用途的东西。请改用 data-* 属性。

<span data-type="complete-sentence">
    She <span data-type="verb">loves</span> him a <span>lot</span>.
</span>

现在，我瞄准了具有 data-type 并使用 content 属性和 attr 的 span，以及伪选择器:before(如果需要，您也可以使用 :after)为它们应用样式。

span[data-type]:before {
   content: attr(data-type) " | ";
}

DEMO(另请注意，如果您使用 :after，请将其设为 content: "| "attr(data-type);)

此外，用户@bryc 在图像示例中提供了您想要它的方式的示例。一定要看看here