self closing tags awkwardness

In this example below you will see how to do a self closing tags awkwardness with some HTML / CSS and Javascript

do they support pseudo elements and styles?

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
<!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;
}

Comments