<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>self closing tags awkwardness</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<h1>self closing tags awkwardness</h1>
<h2>do they support pseudo elements and styles?</h2>
</div>
<div class="box">
<h5 class="row">link</h5>
<link/>
</div>
<div class="box">
<h5 class="row">input type="text"</h5>
<input type="text"/>
</div>
<div class="box">
<h5 class="row">input type="radio"</h5>
<input type="radio"/>
</div>
<div class="box">
<h5 class="row">input type="checkbox"</h5>
<input type="checkbox"/>
</div>
<div class="box">
<h5 class="row">input type="button"</h5>
<input type="button"/>
</div>
<div class="box">
<h5 class="row">meta</h5>
<meta/>
</div>
<div class="box">
<h5 class="row">br</h5><br/>
</div>
<div class="box">
<h5 class="row">wbr</h5>
<wbr/>
</div>
<div class="box">
<h5 class="row">hr</h5>
<hr/>
</div>
<div class="box">
<h5 class="row">area</h5>
<area/>
</div>
<div class="box">
<h5 class="row">base</h5>
<base/>
</div>
<div class="box">
<h5 class="row">param</h5>
<param/>
</div>
<div class="box">
<h5 class="row">source</h5>
<source/>
</div>
<div class="box">
<h5 class="row">img</h5><img/>
</div>
<div class="box">
<h5 class="row">keygen</h5>
<keygen/>
</div>
<div class="box">
<h5 class="row">embed</h5>
<embed/>
</div>
<div class="box">
<h5 class="row">command</h5>
<command> </command>
</div>
<div class="box">
<h5 class="row">col</h5>
<col/>
</div>
<div class="box">
<h5 class="row">track</h5>
<track/>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/self-closing-tags-awkwardness-gLmec */
link, input, meta, hr, br, wbr, area, param, source, base, img, keygen, embed, command, col, track {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
border: 1px solid #aaa;
display: block;
background: #ccc;
color: #999;
border-radius: 100%;
font-size: 1em;
font-weight: bold;
align-self: flex-end;
text-align: center;
line-height: 3em;
padding: 0;
margin: 0;
width: 3em;
height: 3em;
}
link:before, input:before, meta:before, hr:before, br:before, wbr:before, area:before, param:before, source:before, base:before, img:before, keygen:before, embed:before, command:before, col:before, track:before {
content: 'wtf';
}
link:empty, input:empty, meta:empty, hr:empty, br:empty, wbr:empty, area:empty, param:empty, source:empty, base:empty, img:empty, keygen:empty, embed:empty, command:empty, col:empty, track:empty {
background: #333;
}
::-webkit-keygen-select {
display: none;
}
[_moz-type="-mozilla-keygen"] {
-moz-appearance: none;
border: 1px solid #aaa;
display: block;
background: #ccc;
color: #999;
border-radius: 100%;
font-size: 1em;
font-weight: bold;
align-self: flex-end;
text-align: center;
line-height: 3em;
padding: 0;
margin: 0;
width: 3em;
height: 3em;
}
[_moz-type="-mozilla-keygen"]:before {
content: 'wtf';
}
[_moz-type="-mozilla-keygen"]:empty {
background: #333;
}
body {
display: flex;
flex-flow: wrap;
}
* {
box-sizing: border-box;
font-family: sans-serif;
}
.box {
display: flex;
align-items: flex-start;
flex-flow: wrap;
flex: 1 0 150px;
padding: 5px;
border: 1px solid #ccc;
}
.row {
flex: 0 0 100%;
padding: 5px;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
