JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="myDiv">Four Ring</div>

CSS

.myDiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-left: 10px;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
  font-size: 22px;
  font-weight: bold;
}

.myDiv::before {
  content: ".... .... .... .... ...."; /* your dots */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* stretches the before element over the entire surface of the main element */
  z-index: -1; /* places the ::before element underneath the main div content, as a background */
  letter-spacing: 6px;
  padding-left: 6px; /* letter-spacing adds px after letter, use padding at the beginning to off set it to remain centered. */
  font-size: 50px;
  color: hsla(0, 0%, 0%, 0.2);
  transform: rotate(-90deg); /* turns the .... sideways */
  margin-left: -38px;
    line-height: 22px;



}