Skip to content

Instantly share code, notes, and snippets.

@dubiouscript

dubiouscript/dabblet.css

Forked from GeorgeTzellis/dabblet.css
Created July 5, 2019 14:42
Show Gist options
  • Save dubiouscript/71963523eb392aabc7255f7ef70f1a65 to your computer and use it in GitHub Desktop.
Save dubiouscript/71963523eb392aabc7255f7ef70f1a65 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @GeorgeTzellis GeorgeTzellis revised this gist Dec 16, 2014. 2 changed files with 7 additions and 7 deletions.
    11 changes: 6 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,14 +13,15 @@ body::before, body::after {

    ::before, ::after {
    display: inline-block;
    font: 0/0 monospace;
    font: 0px/0 monospace;
    color: purple;
    transform: scale(0, 0);
    transition: transform 1s;
    transition: all .5s;
    }

    body:hover ::before,
    body:hover ::after {
    ::before{margin-left:-3em;margin-top:-0.3em;float:left;}
    ::after {margin-left:0em;margin-top:0em;}
    *:hover::before,
    *:hover::after {
    font-size: inherit;
    transform: scale(1, 1);
    }
    3 changes: 1 addition & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,4 @@
    <section id="foo" class="bar">You can view the HTML source on hover
    <pre>Is this a pre element, or just a custom div?</pre>
    <var>Same goes for this one.</var>
    </section>

    </section>
  2. @GeorgeTzellis GeorgeTzellis revised this gist Aug 12, 2013. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -29,8 +29,8 @@ html { quotes: "<html" "</html>" ; }
    head { quotes: "<head" "</head>" ; }
    title { quotes: "<title" "</title>" ; }
    base { quotes: "<base" "</base>" ; }
    link { quotes: "<link" "</link>" ; }
    meta { quotes: "<meta" "</meta>" ; }
    link { quotes: "<link" "" ; }
    meta { quotes: "<meta" "" ; }
    style { quotes: "<style" "</style>" ; }
    script { quotes: "<script" "</script>" ; }
    noscript { quotes: "<noscript" "</noscript>" ; }
    @@ -50,7 +50,7 @@ footer { quotes: "<footer" "</footer>" ; }
    address { quotes: "<address" "</address>" ; }
    main { quotes: "<main" "</main>" ; }
    p { quotes: "<p" "</p>" ; }
    hr { quotes: "<hr" "</hr>" ; }
    hr { quotes: "<hr" "" ; }
    pre { quotes: "<pre" "</pre>" ; }
    blockquote { quotes: "<blockquote" "</blockquote>"; }
    ol { quotes: "<ol" "</ol>" ; }
    @@ -89,19 +89,19 @@ rp { quotes: "<rp" "</rp>" ; }
    bdi { quotes: "<bdi" "</bdi>" ; }
    bdo { quotes: "<bdo" "</bdo>" ; }
    span { quotes: "<span" "</span>" ; }
    br { quotes: "<br" "</br>" ; }
    wbr { quotes: "<wbr" "</wbr>" ; }
    br { quotes: "<br" "" ; }
    wbr { quotes: "<wbr" "" ; }
    ins { quotes: "<ins" "</ins>" ; }
    del { quotes: "<del" "</del>" ; }
    img { quotes: "<img" "</img>" ; }
    img { quotes: "<img" "" ; }
    iframe { quotes: "<iframe" "</iframe>" ; }
    embed { quotes: "<embed" "</embed>" ; }
    object { quotes: "<object" "</object>" ; }
    param { quotes: "<param" "</param>" ; }
    param { quotes: "<param" "" ; }
    video { quotes: "<video" "</video>" ; }
    audio { quotes: "<audio" "</audio>" ; }
    source { quotes: "<source" "</source>" ; }
    track { quotes: "<track" "</track>" ; }
    source { quotes: "<source" "" ; }
    track { quotes: "<track" "" ; }
    canvas { quotes: "<canvas" "</canvas>" ; }
    map { quotes: "<map" "</map>" ; }
    area { quotes: "<area" "</area>" ; }
    @@ -121,7 +121,7 @@ form { quotes: "<form" "</form>" ; }
    fieldset { quotes: "<fieldset" "</fieldset>" ; }
    legend { quotes: "<legend" "</legend>" ; }
    label { quotes: "<label" "</label>" ; }
    input { quotes: "<input" "</input>" ; }
    input { quotes: "<input" "" ; }
    button { quotes: "<button" "</button>" ; }
    select { quotes: "<select" "</select>" ; }
    datalist { quotes: "<datalist" "</datalist>" ; }
    @@ -135,4 +135,4 @@ meter { quotes: "<meter" "</meter>" ; }
    details { quotes: "<details" "</details>" ; }
    summary { quotes: "<summary" "</summary>" ; }
    menuitem { quotes: "<menuitem" "</menuitem>" ; }
    menu { quotes: "<menu" "</menu>" ; }
    menu { quotes: "<menu" "</menu>" ; }
  3. @GeorgeTzellis GeorgeTzellis revised this gist Jul 28, 2013. 2 changed files with 5 additions and 6 deletions.
    9 changes: 4 additions & 5 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,22 @@
    /* HTML viewer */
    /* HTML source viewer */
    body { margin: 3em;}

    ::before { content: open-quote '>'; }
    [id]::before { content: open-quote ' id="'attr(id) '">'; }
    [class]::before { content: open-quote ' class="'attr(class)'">'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }
    ::after { content: close-quote; }
    ::after { content: close-quote ; }
    html::before, html::after,
    body::before, body::after {
    content: none;
    }

    ::before, ::after {
    display: inline-block;
    font-family: monospace;
    font: 0/0 monospace;
    color: purple;
    transform: scale(0, 0);
    transition: transform 1s;
    font-size: 0;
    transform: scale(0,0);
    }

    body:hover ::before,
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <section id="foo" class="bar">The gates open to reveal...
    <section id="foo" class="bar">You can view the HTML source on hover
    <pre>Is this a pre element, or just a custom div?</pre>
    <var>Same goes for this one.</var>
    </section>
  4. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    /* HTML viewer */
    body { margin: 3em;}

    ::before { content: open-quote '\>'; }
    [id]::before { content: open-quote ' id="'attr(id) '"\>'; }
    [class]::before { content: open-quote ' class="'attr(class)'"\>'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'"\>'; }
    ::before { content: open-quote '>'; }
    [id]::before { content: open-quote ' id="'attr(id) '">'; }
    [class]::before { content: open-quote ' class="'attr(class)'">'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }
    ::after { content: close-quote; }
    html::before, html::after,
    body::before, body::after {
  5. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    /* HTML viewer */
    body { margin: 3em;}

    ::before { content: open-quote '>'; }
    [id]::before { content: open-quote ' id="'attr(id) '">'; }
    [class]::before { content: open-quote ' class="'attr(class)'">'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }
    ::before { content: open-quote '\>'; }
    [id]::before { content: open-quote ' id="'attr(id) '"\>'; }
    [class]::before { content: open-quote ' class="'attr(class)'"\>'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'"\>'; }
    ::after { content: close-quote; }
    html::before, html::after,
    body::before, body::after {
  6. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    /* code view */
    /* HTML viewer */
    body { margin: 3em;}

    ::before { content: open-quote '>'; }
  7. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,6 @@ body { margin: 3em;}
    [id]::before { content: open-quote ' id="'attr(id) '">'; }
    [class]::before { content: open-quote ' class="'attr(class)'">'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }

    ::after { content: close-quote; }
    html::before, html::after,
    body::before, body::after {
  8. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ body { margin: 3em;}
    ::after { content: close-quote; }
    html::before, html::after,
    body::before, body::after {
    content: none;
    content: none;
    }

    ::before, ::after {
  9. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,9 +6,11 @@ body { margin: 3em;}
    [class]::before { content: open-quote ' class="'attr(class)'">'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }

    ::after { content: close-quote; }
    ::after { content: close-quote; }
    html::before, html::after,
    body::before, body::after { content: none; }
    body::before, body::after {
    content: none;
    }

    ::before, ::after {
    display: inline-block;
  10. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <section id="foo" class="bar">Hover over this section to get the code view
    <pre>This is HTML, JS or CSS code wrapped in a pre</pre>
    <div>And this content is in a div</div>
    <section id="foo" class="bar">The gates open to reveal...
    <pre>Is this a pre element, or just a custom div?</pre>
    <var>Same goes for this one.</var>
    </section>

  11. @GeorgeTzellis GeorgeTzellis revised this gist Jul 18, 2013. 1 changed file with 116 additions and 7 deletions.
    123 changes: 116 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    /* code view */
    body { margin: 3em;}

    ::before { content: open-quote '\>'; }
    [id]::before { content: open-quote ' id="'attr(id) '"\>'; }
    [class]::before { content: open-quote ' class="'attr(class)'"\>'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'"\>'; }
    ::before { content: open-quote '>'; }
    [id]::before { content: open-quote ' id="'attr(id) '">'; }
    [class]::before { content: open-quote ' class="'attr(class)'">'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }

    ::after { content: close-quote; }
    html::before, html::after,
    @@ -24,6 +24,115 @@ body:hover ::after {
    font-size: inherit;
    transform: scale(1, 1);
    }
    section {quotes: '<section' '</section>';}
    div {quotes: '<div' '</div>';}
    pre {quotes: '<pre' '</pre>';}

    html { quotes: "<html" "</html>" ; }
    head { quotes: "<head" "</head>" ; }
    title { quotes: "<title" "</title>" ; }
    base { quotes: "<base" "</base>" ; }
    link { quotes: "<link" "</link>" ; }
    meta { quotes: "<meta" "</meta>" ; }
    style { quotes: "<style" "</style>" ; }
    script { quotes: "<script" "</script>" ; }
    noscript { quotes: "<noscript" "</noscript>" ; }
    body { quotes: "<body" "</body>" ; }
    section { quotes: "<section" "</section>" ; }
    nav { quotes: "<nav" "</nav>" ; }
    article { quotes: "<article" "</article>" ; }
    aside { quotes: "<aside" "</aside>" ; }
    h1 { quotes: "<h1" "</h1>" ; }
    h2 { quotes: "<h2" "</h2>" ; }
    h3 { quotes: "<h3" "</h3>" ; }
    h4 { quotes: "<h4" "</h4>" ; }
    h5 { quotes: "<h5" "</h5>" ; }
    h6 { quotes: "<h6" "</h6>" ; }
    header { quotes: "<header" "</header>" ; }
    footer { quotes: "<footer" "</footer>" ; }
    address { quotes: "<address" "</address>" ; }
    main { quotes: "<main" "</main>" ; }
    p { quotes: "<p" "</p>" ; }
    hr { quotes: "<hr" "</hr>" ; }
    pre { quotes: "<pre" "</pre>" ; }
    blockquote { quotes: "<blockquote" "</blockquote>"; }
    ol { quotes: "<ol" "</ol>" ; }
    ul { quotes: "<ul" "</ul>" ; }
    li { quotes: "<li" "</li>" ; }
    dl { quotes: "<dl" "</dl>" ; }
    dt { quotes: "<dt" "</dt>" ; }
    dd { quotes: "<dd" "</dd>" ; }
    figure { quotes: "<figure" "</figure>" ; }
    figcaption { quotes: "<figcaption" "</figcaption>"; }
    div { quotes: "<div" "</div>" ; }
    a { quotes: "<a" "</a>" ; }
    em { quotes: "<em" "</em>" ; }
    strong { quotes: "<strong" "</strong>" ; }
    small { quotes: "<small" "</small>" ; }
    s { quotes: "<s" "</s>" ; }
    cite { quotes: "<cite" "</cite>" ; }
    q { quotes: "<q" "</q>" ; }
    dfn { quotes: "<dfn" "</dfn>" ; }
    abbr { quotes: "<abbr" "</abbr>" ; }
    data { quotes: "<data" "</data>" ; }
    time { quotes: "<time" "</time>" ; }
    code { quotes: "<code" "</code>" ; }
    var { quotes: "<var" "</var>" ; }
    samp { quotes: "<samp" "</samp>" ; }
    kbd { quotes: "<kbd" "</kbd>" ; }
    sub { quotes: "<sub" "</sub>" ; }
    sup { quotes: "<sup" "</sup>" ; }
    i { quotes: "<i" "</i>" ; }
    b { quotes: "<b" "</b>" ; }
    u { quotes: "<u" "</u>" ; }
    mark { quotes: "<mark" "</mark>" ; }
    ruby { quotes: "<ruby" "</ruby>" ; }
    rt { quotes: "<rt" "</rt>" ; }
    rp { quotes: "<rp" "</rp>" ; }
    bdi { quotes: "<bdi" "</bdi>" ; }
    bdo { quotes: "<bdo" "</bdo>" ; }
    span { quotes: "<span" "</span>" ; }
    br { quotes: "<br" "</br>" ; }
    wbr { quotes: "<wbr" "</wbr>" ; }
    ins { quotes: "<ins" "</ins>" ; }
    del { quotes: "<del" "</del>" ; }
    img { quotes: "<img" "</img>" ; }
    iframe { quotes: "<iframe" "</iframe>" ; }
    embed { quotes: "<embed" "</embed>" ; }
    object { quotes: "<object" "</object>" ; }
    param { quotes: "<param" "</param>" ; }
    video { quotes: "<video" "</video>" ; }
    audio { quotes: "<audio" "</audio>" ; }
    source { quotes: "<source" "</source>" ; }
    track { quotes: "<track" "</track>" ; }
    canvas { quotes: "<canvas" "</canvas>" ; }
    map { quotes: "<map" "</map>" ; }
    area { quotes: "<area" "</area>" ; }
    svg { quotes: "<svg" "</svg>" ; }
    math { quotes: "<math" "</math>" ; }
    table { quotes: "<table" "</table>" ; }
    caption { quotes: "<caption" "</caption>" ; }
    colgroup { quotes: "<colgroup" "</colgroup>" ; }
    col { quotes: "<col" "</col>" ; }
    tbody { quotes: "<tbody" "</tbody>" ; }
    thead { quotes: "<thead" "</thead>" ; }
    tfoot { quotes: "<tfoot" "</tfoot>" ; }
    tr { quotes: "<tr" "</tr>" ; }
    td { quotes: "<td" "</td>" ; }
    th { quotes: "<th" "</th>" ; }
    form { quotes: "<form" "</form>" ; }
    fieldset { quotes: "<fieldset" "</fieldset>" ; }
    legend { quotes: "<legend" "</legend>" ; }
    label { quotes: "<label" "</label>" ; }
    input { quotes: "<input" "</input>" ; }
    button { quotes: "<button" "</button>" ; }
    select { quotes: "<select" "</select>" ; }
    datalist { quotes: "<datalist" "</datalist>" ; }
    optgroup { quotes: "<optgroup" "</optgroup>" ; }
    option { quotes: "<option" "</option>" ; }
    textarea { quotes: "<textarea" "</textarea>" ; }
    keygen { quotes: "<keygen" "</keygen>" ; }
    output { quotes: "<output" "</output>" ; }
    progress { quotes: "<progress" "</progress>" ; }
    meter { quotes: "<meter" "</meter>" ; }
    details { quotes: "<details" "</details>" ; }
    summary { quotes: "<summary" "</summary>" ; }
    menuitem { quotes: "<menuitem" "</menuitem>" ; }
    menu { quotes: "<menu" "</menu>" ; }
  12. @GeorgeTzellis GeorgeTzellis revised this gist Jul 17, 2013. 2 changed files with 13 additions and 11 deletions.
    20 changes: 11 additions & 9 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,14 @@
    /* code view */
    body { margin: 3em;}

    ::before { content: open-quote; }
    ::after { content: close-quote; }
    html::before,
    body::before,
    html::after,
    body::after { content: none; }
    ::before { content: open-quote '\>'; }
    [id]::before { content: open-quote ' id="'attr(id) '"\>'; }
    [class]::before { content: open-quote ' class="'attr(class)'"\>'; }
    [id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'"\>'; }

    ::after { content: close-quote; }
    html::before, html::after,
    body::before, body::after { content: none; }

    ::before, ::after {
    display: inline-block;
    @@ -22,6 +24,6 @@ body:hover ::after {
    font-size: inherit;
    transform: scale(1, 1);
    }
    section {quotes: '<section>' '</section>';}
    div {quotes: '<div>' '</div>';}
    pre {quotes: '<pre>' '</pre>';}
    section {quotes: '<section' '</section>';}
    div {quotes: '<div' '</div>';}
    pre {quotes: '<pre' '</pre>';}
    4 changes: 2 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <section>Hover over this section to get the code view
    <section id="foo" class="bar">Hover over this section to get the code view
    <pre>This is HTML, JS or CSS code wrapped in a pre</pre>
    <div>And this content is in a div</div>
    </section>
    </section>
  13. @GeorgeTzellis GeorgeTzellis revised this gist Jul 17, 2013. 2 changed files with 24 additions and 14 deletions.
    30 changes: 20 additions & 10 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,27 @@
    /* code view */
    body { margin: 3em;}
    body::before, body::after { content: "";}
    html::before, html::after { content: "";}

    *::before, *::after {
    font-size: 0;
    ::before { content: open-quote; }
    ::after { content: close-quote; }
    html::before,
    body::before,
    html::after,
    body::after { content: none; }

    ::before, ::after {
    display: inline-block;
    font-family: monospace;
    color: purple;
    transition: 1s;
    transition: transform 1s;
    font-size: 0;
    transform: scale(0,0);
    }

    *::before { content: "<"attr(data-tag) ">";}
    *::after { content: "</"attr(data-tag)">";}

    body:hover *::before,
    body:hover *::after { font-size: 1em;}
    body:hover ::before,
    body:hover ::after {
    font-size: inherit;
    transform: scale(1, 1);
    }
    section {quotes: '<section>' '</section>';}
    div {quotes: '<div>' '</div>';}
    pre {quotes: '<pre>' '</pre>';}
    8 changes: 4 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <section title="hello" data-tag="section">Hover over this section to get the code view
    <pre data-tag="pre">This is meant to be HTML or JS code</pre>
    <div data-tag="div">I guess CSS would go here</div>
    </section>
    <section>Hover over this section to get the code view
    <pre>This is HTML, JS or CSS code wrapped in a pre</pre>
    <div>And this content is in a div</div>
    </section>
  14. @GeorgeTzellis GeorgeTzellis revised this gist Aug 21, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /* code view */
    body { margin: 3em;}
    body::before, body::after { content: '';}
    html::before, html::after { content: '';}
    body::before, body::after { content: "";}
    html::before, html::after { content: "";}

    *::before, *::after {
    font-size: 0;
  15. @GeorgeTzellis GeorgeTzellis revised this gist Aug 21, 2012. 2 changed files with 3 additions and 3 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,8 @@ html::before, html::after { content: '';}
    transition: 1s;
    }

    *::before { content: '<'attr(data-tag)'>';}
    *::after { content: '</'attr(data-tag)'>';}
    *::before { content: "<"attr(data-tag) ">";}
    *::after { content: "</"attr(data-tag)">";}

    body:hover *::before,
    body:hover *::after { font-size: 1em;}
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <section data-tag="section">Hover over this section to get the code view
    <section title="hello" data-tag="section">Hover over this section to get the code view
    <pre data-tag="pre">This is meant to be HTML or JS code</pre>
    <div data-tag="div">I guess CSS would go here</div>
    </section>
  16. @GeorgeTzellis GeorgeTzellis revised this gist Aug 12, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /* code view */
    body { margin: 3em;}
    body::before, body::after { content:'';}
    html::before, html::after { content:'';}
    body::before, body::after { content: '';}
    html::before, html::after { content: '';}

    *::before, *::after {
    font-size: 0;
  17. @GeorgeTzellis GeorgeTzellis created this gist Jul 28, 2012.
    17 changes: 17 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    /* code view */
    body { margin: 3em;}
    body::before, body::after { content:'';}
    html::before, html::after { content:'';}

    *::before, *::after {
    font-size: 0;
    font-family: monospace;
    color: purple;
    transition: 1s;
    }

    *::before { content: '<'attr(data-tag)'>';}
    *::after { content: '</'attr(data-tag)'>';}

    body:hover *::before,
    body:hover *::after { font-size: 1em;}
    4 changes: 4 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <section data-tag="section">Hover over this section to get the code view
    <pre data-tag="pre">This is meant to be HTML or JS code</pre>
    <div data-tag="div">I guess CSS would go here</div>
    </section>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}