stackoom
  简体   繁体   中英

css :before/:after pseudo-elements/content reference tag name

 原文  2014-04-20 04:10:29  9   3    html/ css

Question

Is it possible to use the CSS "content" attribute (in :before/:after pseudo elements) to actually label a block with its tag name? like attr(...) , but for the tag instead of its attributes.

PseudoCSS:

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

should prepend all elements in the page with their tag name written in red color.

3 answers

solution1
 4 ACCPTED  2014-04-20 04:31:57

This isn't possible with css. To my knowledge, the only way to do this would be to write out the contents by hand.

solution2
 1  2016-02-03 20:22:58

Here's some Javascript + CSS to do it (pardon the CDATA section, added to un-confuse the parser so it can be pasted in here). I noticed a link to a prior commenter's code is broken, so figured it was worth posting my own.

<![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();">
...
]]>

solution3
 0  2020-06-05 19:08:46

I prefer not to add attributes and modify the document, so I wrote a little script to make CSS for each type of HTML element . I haven't included the script here, but it's very simple to do this.

Here is the CSS output, and an example including contenteditable="true" and a button to toggle the tags. I think it works nicely for editing rich-text, with the option to show tags. I recall that WordPerfect has a feature "Reveal Codes", which is somewhat similar. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Multiple :before or :after pseudo-elements in css Using CSS :before and :after pseudo-elements with inline CSS? Is there a way to have the equivalent of multiple :before and :after pseudo-elements in CSS? CSS Pseudo-elements :before & :after work differently in Internet Explorer CSS - Opacity to main element not to pseudo-elements (::after, ::before) In a div containing 3 paragraphs can I use CSS Pseudo-elements like after and before to change the p tag to the span tag Transitions on pseudo-elements :after and :before not working Pseudo-elements :after and :before not appearing consistently Using :before and :after pseudo-elements with images Ignore margin for pseudo-elements :before or :after
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM