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

【问题标题】：Is it possible to display the HTML tag type using CSS only是否可以仅使用 CSS 显示 HTML 标记类型
【发布时间】：2016-04-11 22:49:58
【问题描述】：

我想添加页面上使用的 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"
}
...

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

不是 100% 确定这是否是您所追求的，但试试这个：

CSS

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

用法

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

这将显示元素之后的一些文本。有关示例，请参见以下演示：

【讨论】：

感谢您在这里付出的努力。谢谢你。我认为尽管基于这种方法，您只需为所有内容添加一个类（或者更好的是，一个数据属性）并使用 *:before { content: attr(class) }。不需要所有额外的
```
 和  标记。但我追求的是一种侵入性要小得多的方法——理想情况下根本不改变大部分 HTML。
```
根据您的描述，您希望在标记元素上投入最少的精力。 CSS 和 HTML 对任何“动态”都有限制。你已经达到了 CSS 可以做的极限。当您将来接触到更多的 Web 开发时，您会看到对
```
 组合的需求。数据属性比您将来会意识到的类以及学习 JavaScript 的必要性更有限。当然，除非这只是一种爱好。
```

【解决方案3】：

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

<xmp> 
  ... 
</xmp>

【讨论】：

谢谢阿利。不幸的是，我不是 100% 清楚。我仍然需要标记才能正常显示，就像我想添加某种正在使用的标签的视觉指示器一样的附加显示元素。很像 CSS 伪元素使用 'content:' 的工作方式。非常感谢您的创造性回答。

【解决方案4】：

CSS中有什么东西可以达到这个效果吗？

不，没有。对于元素名称，没有与 attr() 类似的东西（甚至 attr() 也要求您指定属性名称，因此您也不是在寻找直接的类似物）。

【讨论】：