JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="ex">
  <div style="font-family: Helvetica"></div>
  <div style="font-family: Arial"></div>
  <div style="font-family: Futura"></div>
</div>

<div class="ch">
  <div style="font-family: Helvetica"></div>
  <div style="font-family: Arial"></div>
  <div style="font-family: Futura"></div>
</div>

CSS

.ex div {
  position: relative;
  margin: 40px;
  color: #000;
  font-size: 32px;
  line-height: 1;
}

.ex div::before {
  content: "xxxxxx " attr(style);
}

.ex div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .25ex;
  height: 1ex;
  background: rgb(0, 255, 255);
  z-index: -1;
}


.ch div {
  position: relative;
  margin: 40px;
  color: #000;
  font-size: 32px;
  line-height: 1;
}

.ch div::before {
  content: "0000000000 " attr(style);
}

.ch div::after {
  content: "";
  position: absolute;
  left: 0;
  width: 10ch;
  bottom: .25ex;
  height: 1.5ex;
  background: rgb(255, 255, 0);
  z-index: -1;
}