css :before/:after 伪元素/内容引用标签名称

【问题标题】：css :before/:after pseudo-elements/content reference tag namecss :before/:after 伪元素/内容引用标签名称
【发布时间】：2020-06-06 03:13:34
【问题描述】：

是否可以使用 CSS 的“内容”属性（在 :before/:after 伪元素中）用标签名称实际标记块？类似于attr(...)，但用于标签而不是其属性。

伪CSS：

body *:before{
  content: tagname;
  color: red;
}

应在页面中的所有元素前面加上其标记名称以红色书写。

【问题讨论】：

    标签： html css


    【解决方案1】：

    这在 css 中是不可能的。据我所知，这样做的唯一方法是手写内容。

    【讨论】：

    • 现在很难做到：javascripts 遍历所有元素并设置“data-tagname”属性，然后我在 css 中使用它。
    • 这个答案是正确的，尽管有足够的 Javascript 你可以扩展 CSS 来启用它。卷中有一篇关于此类技术的论文（包括非常相似的示例）。 21 (2018) of "Balisage": "Implementing Hypertext through Embedding Javascript in CSS" (balisage.net/Proceedings)
    【解决方案2】：

    这里有一些 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();">
...
]]>

    【讨论】：

      【解决方案3】：

      我不喜欢添加属性和修改文档，所以我写了一个小脚本来为each type of HTML element制作CSS。我这里没有包含脚本，但是这样做很简单。

      这是 CSS 输出，以及一个示例，包括 contenteditable="true" 和一个切换标签的按钮。我认为它可以很好地编辑富文本，并带有显示标签的选项。我记得 WordPerfect 有一个功能“Reveal Codes”，有点类似。

      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>"; }
.tags samp::before { content: "<samp>"; }
.tags samp::after { content: "</samp>"; }
.tags small::before { content: "<small>"; }
.tags small::after { content: "</small>"; }
.tags span::before { content: "<span>"; }
.tags span::after { content: "</span>"; }
.tags strong::before { content: "<strong>"; }
.tags strong::after { content: "</strong>"; }
.tags sub::before { content: "<sub>"; }
.tags sub::after { content: "</sub>"; }
.tags sup::before { content: "<sup>"; }
.tags sup::after { content: "</sup>"; }
.tags time::before { content: "<time>"; }
.tags time::after { content: "</time>"; }
.tags u::before { content: "<u>"; }
.tags u::after { content: "</u>"; }
.tags var::before { content: "<var>"; }
.tags var::after { content: "</var>"; }
.tags wbr::before { content: "<wbr>"; }
.tags wbr::after { content: "</wbr>"; }
.tags area::before { content: "<area>"; }
.tags area::after { content: "</area>"; }
.tags audio::before { content: "<audio>"; }
.tags audio::after { content: "</audio>"; }
.tags img::before { content: "<img>"; }
.tags img::after { content: "</img>"; }
.tags map::before { content: "<map>"; }
.tags map::after { content: "</map>"; }
.tags track::before { content: "<track>"; }
.tags track::after { content: "</track>"; }
.tags video::before { content: "<video>"; }
.tags video::after { content: "</video>"; }
.tags embed::before { content: "<embed>"; }
.tags embed::after { content: "</embed>"; }
.tags iframe::before { content: "<iframe>"; }
.tags iframe::after { content: "</iframe>"; }
.tags object::before { content: "<object>"; }
.tags object::after { content: "</object>"; }
.tags param::before { content: "<param>"; }
.tags param::after { content: "</param>"; }
.tags picture::before { content: "<picture>"; }
.tags picture::after { content: "</picture>"; }
.tags source::before { content: "<source>"; }
.tags source::after { content: "</source>"; }
.tags canvas::before { content: "<canvas>"; }
.tags canvas::after { content: "</canvas>"; }
.tags noscript::before { content: "<noscript>"; }
.tags noscript::after { content: "</noscript>"; }
.tags script::before { content: "<script>"; }
.tags script::after { content: "</script>"; }
.tags del::before { content: "<del>"; }
.tags del::after { content: "</del>"; }
.tags ins::before { content: "<ins>"; }
.tags ins::after { content: "</ins>"; }
.tags caption::before { content: "<caption>"; }
.tags caption::after { content: "</caption>"; }
.tags col::before { content: "<col>"; }
.tags col::after { content: "</col>"; }
.tags colgroup::before { content: "<colgroup>"; }
.tags colgroup::after { content: "</colgroup>"; }
.tags table::before { content: "<table>"; }
.tags table::after { content: "</table>"; }
.tags tbody::before { content: "<tbody>"; }
.tags tbody::after { content: "</tbody>"; }
.tags td::before { content: "<td>"; }
.tags td::after { content: "</td>"; }
.tags tfoot::before { content: "<tfoot>"; }
.tags tfoot::after { content: "</tfoot>"; }
.tags th::before { content: "<th>"; }
.tags th::after { content: "</th>"; }
.tags thead::before { content: "<thead>"; }
.tags thead::after { content: "</thead>"; }
.tags tr::before { content: "<tr>"; }
.tags tr::after { content: "</tr>"; }
.tags button::before { content: "<button>"; }
.tags button::after { content: "</button>"; }
.tags datalist::before { content: "<datalist>"; }
.tags datalist::after { content: "</datalist>"; }
.tags fieldset::before { content: "<fieldset>"; }
.tags fieldset::after { content: "</fieldset>"; }
.tags form::before { content: "<form>"; }
.tags form::after { content: "</form>"; }
.tags input::before { content: "<input>"; }
.tags input::after { content: "</input>"; }
.tags label::before { content: "<label>"; }
.tags label::after { content: "</label>"; }
.tags legend::before { content: "<legend>"; }
.tags legend::after { content: "</legend>"; }
.tags meter::before { content: "<meter>"; }
.tags meter::after { content: "</meter>"; }
.tags optgroup::before { content: "<optgroup>"; }
.tags optgroup::after { content: "</optgroup>"; }
.tags option::before { content: "<option>"; }
.tags option::after { content: "</option>"; }
.tags output::before { content: "<output>"; }
.tags output::after { content: "</output>"; }
.tags progress::before { content: "<progress>"; }
.tags progress::after { content: "</progress>"; }
.tags select::before { content: "<select>"; }
.tags select::after { content: "</select>"; }
.tags textarea::before { content: "<textarea>"; }
.tags textarea::after { content: "</textarea>"; }
.tags details::before { content: "<details>"; }
.tags details::after { content: "</details>"; }
.tags dialog::before { content: "<dialog>"; }
.tags dialog::after { content: "</dialog>"; }
.tags menu::before { content: "<menu>"; }
.tags menu::after { content: "</menu>"; }
.tags summary::before { content: "<summary>"; }
.tags summary::after { content: "</summary>"; }
.tags slot::before { content: "<slot>"; }
.tags slot::after { content: "</slot>"; }
.tags template::before { content: "<template>"; }
.tags template::after { content: "</template>"; }
.tags acronym::before { content: "<acronym>"; }
.tags acronym::after { content: "</acronym>"; }
.tags applet::before { content: "<applet>"; }
.tags applet::after { content: "</applet>"; }
.tags basefont::before { content: "<basefont>"; }
.tags basefont::after { content: "</basefont>"; }
.tags bgsound::before { content: "<bgsound>"; }
.tags bgsound::after { content: "</bgsound>"; }
.tags big::before { content: "<big>"; }
.tags big::after { content: "</big>"; }
.tags blink::before { content: "<blink>"; }
.tags blink::after { content: "</blink>"; }
.tags center::before { content: "<center>"; }
.tags center::after { content: "</center>"; }
.tags command::before { content: "<command>"; }
.tags command::after { content: "</command>"; }
.tags content::before { content: "<content>"; }
.tags content::after { content: "</content>"; }
.tags dir::before { content: "<dir>"; }
.tags dir::after { content: "</dir>"; }
.tags element::before { content: "<element>"; }
.tags element::after { content: "</element>"; }
.tags font::before { content: "<font>"; }
.tags font::after { content: "</font>"; }
.tags frame::before { content: "<frame>"; }
.tags frame::after { content: "</frame>"; }
.tags frameset::before { content: "<frameset>"; }
.tags frameset::after { content: "</frameset>"; }
.tags image::before { content: "<image>"; }
.tags image::after { content: "</image>"; }
.tags isindex::before { content: "<isindex>"; }
.tags isindex::after { content: "</isindex>"; }
.tags keygen::before { content: "<keygen>"; }
.tags keygen::after { content: "</keygen>"; }
.tags listing::before { content: "<listing>"; }
.tags listing::after { content: "</listing>"; }
.tags marquee::before { content: "<marquee>"; }
.tags marquee::after { content: "</marquee>"; }
.tags menuitem::before { content: "<menuitem>"; }
.tags menuitem::after { content: "</menuitem>"; }
.tags multicol::before { content: "<multicol>"; }
.tags multicol::after { content: "</multicol>"; }
.tags nextid::before { content: "<nextid>"; }
.tags nextid::after { content: "</nextid>"; }
.tags nobr::before { content: "<nobr>"; }
.tags nobr::after { content: "</nobr>"; }
.tags noembed::before { content: "<noembed>"; }
.tags noembed::after { content: "</noembed>"; }
.tags noframes::before { content: "<noframes>"; }
.tags noframes::after { content: "</noframes>"; }
.tags plaintext::before { content: "<plaintext>"; }
.tags plaintext::after { content: "</plaintext>"; }
.tags shadow::before { content: "<shadow>"; }
.tags shadow::after { content: "</shadow>"; }
.tags spacer::before { content: "<spacer>"; }
.tags spacer::after { content: "</spacer>"; }
.tags strike::before { content: "<strike>"; }
.tags strike::after { content: "</strike>"; }
.tags tt::before { content: "<tt>"; }
.tags tt::after { content: "</tt>"; }
.tags xmp::before { content: "<xmp>"; }
.tags xmp::after { content: "</xmp>"; }
      <p><button id="btn_tags">Tags</button></p>

<p>This following is set <code>contenteditable="true"</code>, you can try rich-text editing with visible tags!</p>

<div contenteditable="true">
<h2>Abstract</h2>
<a name="z14" href="https://www.w3.org/MarkUp/1995-archive/html-spec.html">HyperText Markup Language</a> (HTML)
can be used to represent
<ul>
<li>Hypertext news, mail, online documentation,
and collaborative hypermedia;</li>
<li>Menus of options;</li>
<li>Database query results;</li>
<li>Simple structured documents with
inlined graphics.</li>
<li>Hypertext views of existing bodies
of information</li>
</ul>The World Wide Web (W3) initiative
links related information throughout
the globe. HTML provides one simple
format for providing linked information,
and all W3 compatible programs are
required to be capable of handling
HTML. W3 uses an Internet protocol
(Hypertext Transfer Protocol, HTTP),
which allows transfer representations
to be negotiated between client and
server, the result being returned
in an extended MIME message. HTML
is therefore just one, but an important
one, of the representations used
with W3.<p>
HTML is proposed as a MIME content
type.</p><p>
HTML refers to the <a name="z21" href="References.html#z7">URI</a> specification
RFCxxxx.</p><p>
Implementations of HTML parsers and
generators can be found in the various<a name="z22" href="References.html#z10">
W3</a> servers and browsers, in the public
domain W3 code, and may also be built
using various public domain SGML
parsers such as [SGMLS] . HTML documents
are SGML documents with fairly generic
semantics appropriate for representing
information from a wide range of
applications.</p>
<h3>Status of this memo</h3>This document is an Internet Draft.
Internet Drafts are working documents
of the Internet Engineering Task
Force (IETF), its Areas, and its
Working Groups.  Note that other
groups may also distribute working
documents as Internet Drafts.  <p>
Internet Drafts are working documents
valid for a maximum of six months.
Internet Drafts may be updated, replaced,
or obsoleted by other documents at
any time.  It is not appropriate
to use Internet Drafts as reference
material or to cite them other than
as a "working draft" or "work in
progress".</p>  <p>
Distribution of this document is
unlimited.</p> 
</div>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2020-09-20
        • 2013-01-09
        • 2012-12-17
        • 2015-05-06
        • 1970-01-01
        • 2012-04-04
        • 2011-06-22
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode