css:before:after 伪元素内容参考标签名。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css:before:after 伪元素内容参考标签名。相关的知识，希望对你有一定的参考价值。
能否使用CSS "content "属性（在:before:after伪元素中）来实际标注一个区块的标签名，比如说 attr(...)但对于标签而不是其属性。
PseudoCSS。
body *:before
content: tagname;
color: red;
应该在页面中的所有元素前加上红色的标签名。
答案
这在css中是不可能的。 据我所知，唯一的方法是用手写出内容。
另一答案
这里有一些javascript + CSS来实现它（请原谅CDATA部分，是为了解除解析器的困惑而添加的，所以可以粘贴到这里）。我注意到之前一个评论者的代码链接坏了，所以觉得值得把自己的代码贴出来。
<![CDATA[
<html>
<head>
<!-- Javascript and CSS to display tag name, class attribute, and ID on all
elements in an HTML file. "." is put before the class attribute, and
"#" before the ID (following CSS selector usage).
Written 2016-02-03 by Steven J. DeRose.
-->
<style type="text/css">
<!--
*:before
content: "<" attr(info) ">";
font-size: smaller;
color: blue;
vertical-align: 40%;
*:after
content: "</" attr(info) ">";
font-size: smaller;
color: blue;
vertical-align: 40%;
-->
</style>
<script type="text/javascript">
<!--
// Call this from body via @onload.
function init()
var el = document.documentElement;
addTagNameAsClass(el);
// Recursively copies tag names onto @tag, so CSS 'content' can get them.
function addTagNameAsClass(el)
if (el.nodeType != 1) return;
var inf = el.tagName;
if (el.hasAttribute('class')) inf += " ." + el.getAttribute('class');
if (el.hasAttribute('id')) inf += " #" + el.getAttribute('id');
el.setAttribute('info', inf);
var children = el.childNodes;
for (var i=0; i<children.length; i++)
addTagNameAsClass(children[i]);
-->
</script>
</head>
<body onload="init();">
...
]]>
另一答案
我不喜欢添加属性，也不喜欢修改文档，所以我写了一个小脚本，让CSS用于 每种HTML元素. 我没有在这里附上脚本，但要做到这一点非常简单。
这里是CSS的输出，以及一个包含了以下内容的例子 contenteditable="true" 和一个切换标签的按钮。我认为它很适合编辑富文本，并可显示标签。我记得 WordPerfect 有一个功能 "揭秘代码"，有点类似。
function toggle_tags()
document.body.classList.toggle("tags");
toggle_tags();
document.getElementById("btn_tags").addEventListener("click", toggle_tags);.tags *::before, .tags *::after
background: #faa;
border-radius: 3px;
font: normal normal 400 10px/1.2 monospace;
.tags *::before
content: "(";
.tags *::after
content: ")";
.tags html::before content: "<html>";
.tags html::after content: "</html>";
.tags base::before content: "<base>";
.tags base::after content: "</base>";
.tags head::before content: "<head>";
.tags head::after content: "</head>";
.tags link::before content: "<link>";
.tags link::after content: "</link>";
.tags meta::before content: "<meta>";
.tags meta::after content: "</meta>";
.tags style::before content: "<style>";
.tags style::after content: "<\/style>";
.tags title::before content: "<title>";
.tags title::after content: "</title>";
.tags body::before content: "<body>";
.tags body::after content: "</body>";
.tags address::before content: "<address>";
.tags address::after content: "</address>";
.tags article::before content: "<article>";
.tags article::after content: "</article>";
.tags aside::before content: "<aside>";
.tags aside::after content: "</aside>";
.tags footer::before content: "<footer>";
.tags footer::after content: "</footer>";
.tags header::before content: "<header>";
.tags header::after content: "</header>";
.tags h1::before content: "<h1>";
.tags h1::after content: "</h1>";
.tags h2::before content: "<h2>";
.tags h2::after content: "</h2>";
.tags h3::before content: "<h3>";
.tags h3::after content: "</h3>";
.tags h4::before content: "<h4>";
.tags h4::after content: "</h4>";
.tags h5::before content: "<h5>";
.tags h5::after content: "</h5>";
.tags h6::before content: "<h6>";
.tags h6::after content: "</h6>";
.tags hgroup::before content: "<hgroup>";
.tags hgroup::after content: "</hgroup>";
.tags main::before content: "<main>";
.tags main::after content: "</main>";
.tags nav::before content: "<nav>";
.tags nav::after content: "</nav>";
.tags section::before content: "<section>";
.tags section::after content: "</section>";
.tags blockquote::before content: "<blockquote>";
.tags blockquote::after content: "</blockquote>";
.tags dd::before content: "<dd>";
.tags dd::after content: "</dd>";
.tags div::before content: "<div>";
.tags div::after content: "</div>";
.tags dl::before content: "<dl>";
.tags dl::after content: "</dl>";
.tags dt::before content: "<dt>";
.tags dt::after content: "</dt>";
.tags figcaption::before content: "<figcaption>";
.tags figcaption::after content: "</figcaption>";
.tags figure::before content: "<figure>";
.tags figure::after content: "</figure>";
.tags hr::before content: "<hr>";
.tags hr::after content: "</hr>";
.tags li::before content: "<li>";
.tags li::after content: "</li>";
.tags main::before content: "<main>";
.tags main::after content: "</main>";
.tags ol::before content: "<ol>";
.tags ol::after content: "</ol>";
.tags p::before content: "<p>";
.tags p::after content: "</p>";
.tags pre::before content: "<pre>";
.tags pre::after content: "</pre>";
.tags ul::before content: "<ul>";
.tags ul::after content: "</ul>";
.tags a::before content: "<a>";
.tags a::after content: "</a>";
.tags abbr::before content: "<abbr>";
.tags abbr::after content: "</abbr>";
.tags b::before content: "<b>";
.tags b::after content: "</b>";
.tags bdi::before content: "<bdi>";
.tags bdi::after content: "</bdi>";
.tags bdo::before content: "<bdo>";
.tags bdo::after content: "</bdo>";
.tags br::before content: "<br>";
.tags br::after content: "</br>";
.tags cite::before content: "<cite>";
.tags cite::after content: "</cite>";
.tags code::before content: "<code>";
.tags code::after content: "</code>";
.tags data::before content: "<data>";
.tags data::after content: "</data>";
.tags dfn::before content: "<dfn>";
.tags dfn::after content: "</dfn>";
.tags em::before content: "<em>";
.tags em::after content: "</em>";
.tags i::before content: "<i>";
.tags i::after content: "</i>";
.tags kbd::before content: "<kbd>";
.tags kbd::after content: "</kbd>";
.tags mark::before content: "<mark>";
.tags mark::after content: "</mark>";
.tags q::before content: "<q>";
.tags q::after content: "</q>";
.tags rb::before content: "<rb>";
.tags rb::after content: "</rb>";
.tags rp::before content: "<rp>";
.tags rp::after content: "</rp>";
.tags rt::before content: "<rt>";
.tags rt::after content: "</rt>";
.tags rtc::before content: "<rtc>";
.tags rtc::after content: "</rtc>";
.tags ruby::before content: "<ruby>";
.tags ruby::after content: "</ruby>";
.tags s::before content: "<s>";
.tags s::after content: "</s>";
以上是关于css:before:after 伪元素内容参考标签名。的主要内容，如果未能解决你的问题，请参考以下文章