JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div class="as-css-code"></div>
<div class="as-alpha-char"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

div {
  margin: 20px;
}

.as-css-code {
  align-items: center;
  background: thistle;
  display: flex;
  justify-content: center;
  height: 80px;
  position: relative;
  width: 80px;
}

.as-css-code::before {
  content: '\00D7';
  font-size: 3rem;
  position: absolute;
}

.as-css-code::after {
  border: 1px solid crimson;
  content: '';
  height: 34px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
}

.as-alpha-char {
  align-items: center;
  background: thistle;
  display: flex;
  justify-content: center;
  height: 80px;
  position: relative;
  width: 80px;
}

.as-alpha-char::before {
  content: 'H';
  font-size: 3rem;
  position: absolute;
}

.as-alpha-char::after {
  border: 1px solid crimson;
  content: '';
  height: 34px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
}

JavaScript

// This fiddle demonstrates that unicode in a pseudo element's "content" does not behave in the same manner as a typical alpha character.
// https://stackoverflow.com/questions/51831675/vertically-centering-html-entities-contained-in-css-before-selectors