ex-and-ch-units.html

<style>
  .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;
  }
</style>

<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>

Demo