是否可以仅使用CSS显示HTML标记类型

Question

我想添加页面上使用的HTML标记/元素的可视指示。 通过标签/元素我的意思是如果它是锚标签我想显示“a”。同样，如果它是标题2，我想显示“H2”或类似。

我知道我可以使用CSS'content：'属性和伪元素来实现类似的结果：

*:before {
    content: attr(title);
}

但据我所知，这仅适用于HTML属性，而不适用于标签本身。 理想情况下，我想要像：

*:before {
    content: tag();
}

CSS中有什么东西可以实现这个结果吗？

我无法使用任何javascript。仅限CSS。

我唯一的另一个想法是将所有标签/元素映射到我的CSS中，如下所示：

a:before {
    content: "a"
}
p:before {
    content: "p"
}
h1:before {
    content: "h1"
}
h2:before {
    content: "h2"
}
...

...等所有标签/元素。但我正在寻找一种更有活力的方式。

Answer 1

这是一个像Sass这样的预处理器会派上用场的场合。然后你可以简单地做：

$tags: a, p, h1, h2, etc;

@each $tag in $tags {
  #{$tag}:before {
    content: "#{$tag}";
  }
}

jsFiddle demo

否则，您的问题的答案（CSS中是否有任何可以实现此结果的内容？），可能不是。

Answer 2

Not 100% sure if this is what you're after, but try this:

CSS

pre code[class]:after {
  content: 'highlight: ' attr(class);
  display: block;
  text-align: right;
  font-size: smaller;
  padding-top: 5px;
}

USAGE

<pre><code class="h1"><h1>Heading 1</h1></code></pre>

This will show some text that's after the element. See the following demo for examples:

PLUNKER

Answer 3

这似乎完成了没有CSS和JS的工作。您只需将内容嵌套在xmp标记中。

<xmp> 
  ... 
</xmp>

fiddle

Answer 4

  

CSS中有什么东西可以实现这个结果吗？

不，没有。对于元素名称，attr()没有模拟（甚至attr()要求您指定属性名称，因此您也不会寻找直接模拟。）