使用 css 将 html 属性放入输出中？

Question

是否可以直观地显示 html 属性，这些属性通常只存在于源代码中，在 html 的输出中，锚定到它们分组的元素？

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

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 的跨度，以及伪选择器 :before（您可以使用:after 也可以，如果你愿意的话）对它们应用样式。

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

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

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

使用 css 将 html 属性放入输出中？

Putting html attribute in the output with css?

html

javascript

css

styling