Skip to content

Instantly share code, notes, and snippets.

@dubiouscript
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.
HTML source viewer
/* 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;}
<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>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment