是否可以在 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”类(全局属性)。我想以某种方式让输出显示看起来像这样,而不是它当前的样子。
最佳答案
首先,不要尝试使用不适合这种用途的东西。请改用 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
关于javascript - 使用 css 将 html 属性放在输出中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29530083/