Pseudo-popups, css only

by Simon Hi

HTML

<h1>Pseudo popups, css only</h1>
<p>Click on a number!</p>
<div class="pseudo-popups">
  <nav>
    <label>
			1
			<input type="radio" name="magic">
			<div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</div>
		</label>
    <label>
			2
			<input type="radio" name="magic">
			<div>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
			</div>
		</label>
    <label>
			3
			<input type="radio" name="magic">
			<div>
				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
			</div>
		</label>
  </nav>
  <input id="X" type="radio" name="magic" checked>
  <label for="X">X</label>
</div>

CSS

body {
  color: black;
  background: white;
  font-family: sans-serif;
}

.pseudo-popups {
  position: relative;
}

.pseudo-popups nav {
  display: flex;
}

.pseudo-popups nav label {
  flex: 1;
  color: white;
  padding: 0.25rem;
  text-align: center;
  cursor: pointer;
}

.pseudo-popups nav label input {
  opacity: 0;
  width: 0;
}

.pseudo-popups nav label:nth-of-type(1) {
  background: red;
}

.pseudo-popups nav label:nth-of-type(2) {
  background: green;
}

.pseudo-popups nav label:nth-of-type(3) {
  background: blue;
}

.pseudo-popups nav label div {
  display: none;
  position: absolute;
  top: 3rem;
  left: 3rem;
  right: 3rem;
  color: black;
  background: white;
  border: 1px solid black;
  padding: 0.5rem;
  text-align: left;
}

.pseudo-popups nav label input:checked+div {
  display: block;
}

#X,
label[for="X"] {
  display: block;
  box-sizing: border-box;
}

#X:checked,
#X:checked+label[for="X"] {
  display: none;
}

#X,
label[for="X"] {
  box-sizing: border-box;
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 2rem;
  right: 2rem;
  color: transparent;
  border: 1px solid black;
  border-radius: 1rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

#X {
  opacity: 0;
}

label[for="X"] {
  z-index: 1;
  background: white;
}

label[for="X"]:before,
label[for="X"]:after {
  content: "X";
  display: block;
  z-index: 2;
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.875rem;
  right: 0.875rem;
  background: black;
}

label[for="X"]:before {
  transform: rotate(45deg);
}

label[for="X"]:after {
  transform: rotate(-45deg);
}