<div class="close-btn center invisible-text">Close</div>

.close-btn {
  /* NOTE: `close-btn` class must be positioned (i.e., not have a position property set to the default `static`). In this demo, this is achieved by adding the `center` class (see below) which sets the position to absolute */
	width: 1.875rem;
	height: 1.875rem;
	cursor: pointer;
	background: #d3d3d3; /* Just shows size of x within button */
}

.close-btn::before,
.close-btn::after {
	background: #222;
	content: '';
	position: absolute;
	top: 0.875rem;
	width: 1.625rem;
	height: 0.1875rem;  /* Thickness of lines. 3px / 16 = 0.1875rem */
}

.close-btn::before {
	transform: rotate(45deg);
	left: 0.125rem;
}

.close-btn::after {
	transform: rotate(-45deg);
	right: 0.125rem;
}

/* Add the `center` class to center the close button within its parent */
.center {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Make text invisible but allow screen readers to know it exists */
.invisible-text {
	display: inline-block;
	overflow: hidden;
	text-indent: 100%;
	color: transparent;
	white-space: nowrap;
}