html {
	background-color: white;
	padding: 1px 3px;
}
body {
	padding: 1px 3px;
}
div {
	padding: 1px 3px;
	margin: 5px;
}
h1, h2, h3, h4,h5, h6, p {
	background-color: snow;
}
* * {
	outline: 5px solid rgba(255,0,0,.1);
}
* * * {
	outline: 3px dashed rgba(255,0,0,.4);
}
* * * * {
	outline: 2px dotted rgba(255,0,0,.6);
}
* * * * * {
	outline: 1px dotted rgba(255,0,0,.9);
}
* * * * * * {
	outline-color: gray;
}

*::before, *::after {
	border-radius: 3px;
	font: normal normal 400 10px/1.2 monospace;
	vertical-align: middle;
	padding: 1px 3px;
	margin: 0 3px;
	background: #faa;
	color: #fff;
	-webkit-text-fill-color: currentColor;
}
*::before {
	content: "(";
}
*::after {
	content: ")";
}

a::before			{ content: "<a>"; }
a::after			{ content: "</a>"; }
abbr::before		{ content: "<abbr>"; }
abbr::after			{ content: "</abbr>"; }
acronym::before		{ content: "<acronym>"; }
acronym::after		{ content: "</acronym>"; }
address::before		{ content: "<address>"; }
address::after		{ content: "</address>"; }
applet::before		{ content: "<applet>"; }
applet::after		{ content: "</applet>"; }
area::before		{ content: "<area>"; }
area::after			{ content: "</area>"; }
article::before		{ content: "<article>"; }
article::after		{ content: "</article>"; }
aside::before		{ content: "<aside>"; }
aside::after		{ content: "</aside>"; }
audio::before		{ content: "<audio>"; }
audio::after		{ content: "</audio>"; }

b::before			{ content: "<b>"; }
b::after			{ content: "</b>"; }
base::before		{ content: "<base>"; }
base::after			{ content: "</base>"; }
basefont::before	{ content: "<basefont>"; }
basefont::after		{ content: "</basefont>"; }
bdi::before			{ content: "<bdi>"; }
bdi::after			{ content: "</bdi>"; }
bdo::before			{ content: "<bdo>"; }
bdo::after			{ content: "</bdo>"; }
bgsound::before		{ content: "<bgsound>"; }
bgsound::after		{ content: "</bgsound>"; }
big::before			{ content: "<big>"; }
big::after			{ content: "</big>"; }
blink::before		{ content: "<blink>"; }
blink::after		{ content: "</blink>"; }
blockquote::before	{ content: "<blockquote>"; }
blockquote::after	{ content: "</blockquote>"; }
body::before		{ content: "<body>"; }
body::after			{ content: "</body>"; }
br::before			{ content: "<br>"; }
br::after			{ content: "</br>"; }
button::before		{ content: "<button>"; }
button::after		{ content: "</button>"; }

caption::before		{ content: "<caption>"; }
caption::after		{ content: "</caption>"; }
canvas::before		{ content: "<canvas>"; }
canvas::after		{ content: "</canvas>"; }
center::before		{ content: "<center>"; }
center::after		{ content: "</center>"; }
cite::before		{ content: "<cite>"; }
cite::after			{ content: "</cite>"; }
code::before		{ content: "<code>"; }
code::after			{ content: "</code>"; }
col::before			{ content: "<col>"; }
col::after			{ content: "</col>"; }
colgroup::before	{ content: "<colgroup>"; }
colgroup::after		{ content: "</colgroup>"; }
command::before		{ content: "<command>"; }
command::after		{ content: "</command>"; }
content::before		{ content: "<content>"; }
content::after		{ content: "</content>"; }

data::before		{ content: "<data>"; }
data::after			{ content: "</data>"; }
datalist::before	{ content: "<datalist>"; }
datalist::after		{ content: "</datalist>"; }
dd::before			{ content: "<dd>"; }
dd::after			{ content: "</dd>"; }
del::before			{ content: "<del>"; }
del::after			{ content: "</del>"; }
details::before		{ content: "<details>"; }
details::after		{ content: "</details>"; }
dfn::before			{ content: "<dfn>"; }
dfn::after			{ content: "</dfn>"; }
dialog::before		{ content: "<dialog>"; }
dialog::after		{ content: "</dialog>"; }
dir::before			{ content: "<dir>"; }
dir::after			{ content: "</dir>"; }
div::before			{ content: "<div>"; }
div::after			{ content: "</div>"; }
dl::before			{ content: "<dl>"; }
dl::after			{ content: "</dl>"; }
dt::before			{ content: "<dt>"; }
dt::after			{ content: "</dt>"; }

element::before		{ content: "<element>"; }
element::after		{ content: "</element>"; }
em::before			{ content: "<em>"; }
em::after			{ content: "</em>"; }
embed::before		{ content: "<embed>"; }
embed::after		{ content: "</embed>"; }

fieldset::before	{ content: "<fieldset>"; }
fieldset::after		{ content: "</fieldset>"; }
figcaption::before	{ content: "<figcaption>"; }
figcaption::after	{ content: "</figcaption>"; }
figure::before		{ content: "<figure>"; }
figure::after		{ content: "</figure>"; }
font::before		{ content: "<font>"; }
font::after			{ content: "</font>"; }
footer::before		{ content: "<footer>"; }
footer::after		{ content: "</footer>"; }
form::before		{ content: "<form>"; }
form::after			{ content: "</form>"; }
frame::before		{ content: "<frame>"; }
frame::after		{ content: "</frame>"; }
frameset::before	{ content: "<frameset>"; }
frameset::after		{ content: "</frameset>"; }

h1::before			{ content: "<h1>"; }
h1::after			{ content: "</h1>"; }
h2::before			{ content: "<h2>"; }
h2::after			{ content: "</h2>"; }
h3::before			{ content: "<h3>"; }
h3::after			{ content: "</h3>"; }
h4::before			{ content: "<h4>"; }
h4::after			{ content: "</h4>"; }
h5::before			{ content: "<h5>"; }
h5::after			{ content: "</h5>"; }
h6::before			{ content: "<h6>"; }
h6::after			{ content: "</h6>"; }
head::before		{ content: "<head>"; }
head::after			{ content: "</head>"; }
header::before		{ content: "<header>"; }
header::after		{ content: "</header>"; }
hgroup::before		{ content: "<hgroup>"; }
hgroup::after		{ content: "</hgroup>"; }
hr::before			{ content: "<hr>"; }
hr::after			{ content: "</hr>"; }
html::before		{ content: "<html>"; }
html::after			{ content: "</html>"; }

i::before			{ content: "<i>"; }
i::after			{ content: "</i>"; }
iframe::before		{ content: "<iframe>"; }
iframe::after		{ content: "</iframe>"; }
image::before		{ content: "<image>"; }
image::after		{ content: "</image>"; }
img::before			{ content: "<img>"; }
img::after			{ content: "</img>"; }
input::before		{ content: "<input>"; }
input::after		{ content: "</input>"; }
ins::before			{ content: "<ins>"; }
ins::after			{ content: "</ins>"; }
isindex::before		{ content: "<isindex>"; }
isindex::after		{ content: "</isindex>"; }

kbd::before			{ content: "<kbd>"; }
kbd::after			{ content: "</kbd>"; }
keygen::before		{ content: "<keygen>"; }
keygen::after		{ content: "</keygen>"; }

label::before		{ content: "<label>"; }
label::after		{ content: "</label>"; }
legend::before		{ content: "<legend>"; }
legend::after		{ content: "</legend>"; }
li::before			{ content: "<li>"; }
li::after			{ content: "</li>"; }
link::before		{ content: "<link>"; }
link::after			{ content: "</link>"; }
listing::before		{ content: "<listing>"; }
listing::after		{ content: "</listing>"; }

main::before		{ content: "<main>"; }
main::after			{ content: "</main>"; }
map::before			{ content: "<map>"; }
map::after			{ content: "</map>"; }
mark::before		{ content: "<mark>"; }
mark::after			{ content: "</mark>"; }
marquee::before		{ content: "<marquee>"; }
marquee::after		{ content: "</marquee>"; }
menu::before		{ content: "<menu>"; }
menu::after			{ content: "</menu>"; }
menuitem::before	{ content: "<menuitem>"; }
menuitem::after		{ content: "</menuitem>"; }
meta::before		{ content: "<meta>"; }
meta::after			{ content: "</meta>"; }
meter::before		{ content: "<meter>"; }
meter::after		{ content: "</meter>"; }
multicol::before	{ content: "<multicol>"; }
multicol::after		{ content: "</multicol>"; }

nav::before			{ content: "<nav>"; }
nav::after			{ content: "</nav>"; }
nextid::before		{ content: "<nextid>"; }
nextid::after		{ content: "</nextid>"; }
nobr::before		{ content: "<nobr>"; }
nobr::after			{ content: "</nobr>"; }
noembed::before		{ content: "<noembed>"; }
noembed::after		{ content: "</noembed>"; }
noframes::before	{ content: "<noframes>"; }
noframes::after		{ content: "</noframes>"; }
noscript::before	{ content: "<noscript>"; }
noscript::after		{ content: "</noscript>"; }

object::before		{ content: "<object>"; }
object::after		{ content: "</object>"; }
ol::before			{ content: "<ol>"; }
ol::after			{ content: "</ol>"; }
optgroup::before	{ content: "<optgroup>"; }
optgroup::after		{ content: "</optgroup>"; }
option::before		{ content: "<option>"; }
option::after		{ content: "</option>"; }
output::before		{ content: "<output>"; }
output::after		{ content: "</output>"; }

p::before			{ content: "<p>"; }
p::after			{ content: "</p>"; }
param::before		{ content: "<param>"; }
param::after		{ content: "</param>"; }
picture::before		{ content: "<picture>"; }
picture::after		{ content: "</picture>"; }
plaintext::before	{ content: "<plaintext>"; }
plaintext::after	{ content: "</plaintext>"; }
pre::before			{ content: "<pre>"; }
pre::after			{ content: "</pre>"; }
progress::before	{ content: "<progress>"; }
progress::after		{ content: "</progress>"; }

q::before			{ content: "<q>"; }
q::after			{ content: "</q>"; }

rb::before			{ content: "<rb>"; }
rb::after			{ content: "</rb>"; }
rp::before			{ content: "<rp>"; }
rp::after			{ content: "</rp>"; }
rt::before			{ content: "<rt>"; }
rt::after			{ content: "</rt>"; }
rtc::before			{ content: "<rtc>"; }
rtc::after			{ content: "</rtc>"; }
ruby::before		{ content: "<ruby>"; }
ruby::after			{ content: "</ruby>"; }

s::before			{ content: "<s>"; }
s::after			{ content: "</s>"; }
samp::before		{ content: "<samp>"; }
samp::after			{ content: "</samp>"; }
script::before		{ content: "<script>"; }
script::after		{ content: "</script>"; }
section::before		{ content: "<section>"; }
section::after		{ content: "</section>"; }
select::before		{ content: "<select>"; }
select::after		{ content: "</select>"; }
shadow::before		{ content: "<shadow>"; }
shadow::after		{ content: "</shadow>"; }
slot::before		{ content: "<slot>"; }
slot::after			{ content: "</slot>"; }
small::before		{ content: "<small>"; }
small::after		{ content: "</small>"; }
source::before		{ content: "<source>"; }
source::after		{ content: "</source>"; }
spacer::before		{ content: "<spacer>"; }
spacer::after		{ content: "</spacer>"; }
span::before		{ content: "<span>"; }
span::after			{ content: "</span>"; }
strike::before		{ content: "<strike>"; }
strike::after		{ content: "</strike>"; }
strong::before		{ content: "<strong>"; }
strong::after		{ content: "</strong>"; }
style::before		{ content: "<style>"; }
style::after		{ content: "<\/style>"; }
sub::before			{ content: "<sub>"; }
sub::after			{ content: "</sub>"; }
summary::before		{ content: "<summary>"; }
summary::after		{ content: "</summary>"; }
sup::before			{ content: "<sup>"; }
sup::after			{ content: "</sup>"; }

table::before		{ content: "<table>"; }
table::after		{ content: "</table>"; }
tbody::before		{ content: "<tbody>"; }
tbody::after		{ content: "</tbody>"; }
td::before			{ content: "<td>"; }
td::after			{ content: "</td>"; }
template::before	{ content: "<template>"; }
template::after		{ content: "</template>"; }
textarea::before	{ content: "<textarea>"; }
textarea::after		{ content: "</textarea>"; }
tfoot::before		{ content: "<tfoot>"; }
tfoot::after		{ content: "</tfoot>"; }
th::before			{ content: "<th>"; }
th::after			{ content: "</th>"; }
thead::before		{ content: "<thead>"; }
thead::after		{ content: "</thead>"; }
time::before		{ content: "<time>"; }
time::after			{ content: "</time>"; }
title::before		{ content: "<title>"; }
title::after		{ content: "</title>"; }
tr::before			{ content: "<tr>"; }
tr::after			{ content: "</tr>"; }
track::before		{ content: "<track>"; }
track::after		{ content: "</track>"; }
tt::before			{ content: "<tt>"; }
tt::after			{ content: "</tt>"; }

u::before			{ content: "<u>"; }
u::after			{ content: "</u>"; }
ul::before			{ content: "<ul>"; }
ul::after			{ content: "</ul>"; }

var::before			{ content: "<var>"; }
var::after			{ content: "</var>"; }
video::before		{ content: "<video>"; }
video::after		{ content: "</video>"; }

wbr::before			{ content: "<wbr>"; }
wbr::after			{ content: "</wbr>"; }

xmp::before			{ content: "<xmp>"; }
xmp::after			{ content: "</xmp>"; }
