Center an 'X' in a box

by Matthew Day

HTML

<div></div>

CSS

div {
  background-color: thistle;
  height: 40px;
  position: relative;
  width: 40px;
}

div::after,
div::before {
  background-color: crimson;
  border-radius: 4px;
  content: '';
  height: 4px;
  position: absolute;
  top: 18px;
  width: 36px;
}

div::before {
  left: 2px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

div::after {
  right: 2px;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

JavaScript

// To create an 'x' that you need to cener in a parent, the width, left position, and right position in the pseudo element must equal the width of the parent. In addition to this, the height and double the value of the top position must equal the height of the parent.