Why isn't overflow hidden working when the display is too small to fit the prefixed emoji?

Question

Why doesn't this overflowed bus icon hide with:

.buses li:before {
  content: "\1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

body {
  padding: 5px;
  font-size: 120%;
}

a {
  font-size: 110%;
}

strong {
  font-size: 180%;
}

ul,
ol {
  padding-left: 0;
  list-style: none;
}

.buses li:before {
  content: "\1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

#stations li:before {
  content: "🚏";
  padding-right: 8px;
}

.buses {
  display: table;
}

.buses li {
  display: table-row;
}

.buses time {
  display: table-cell;
  padding: 5px;
  width: 3em;
}

#stations li {
  white-space: nowrap;
}

.busstopid {
  white-space: nowrap;
  display: inline-block;
  border-bottom: thin solid black;
  padding-bottom: 2px;
  margin: 0;
}

input[type="text"] {
  font-size: 1em;
  width: 5em;
}

label {
  display: block;
}

input#id {
  display: inline-block !important;
}

input[type="submit"] {
  font-size: 1em;
  display: inline-block !important;
}

<link href="https://newcss.net/lite.css" rel="stylesheet" />
<ul class="buses">

  <li>
    <strong>
    <a href="https://busrouter.sg/#/services/26">26</a>
    </strong>

    <time datetime="2022-05-09T15:37:53+08:00">-5m</time>
    <time datetime="2022-05-09T15:48:46+08:00">5m</time>
    <time datetime="2022-05-09T15:56:26+08:00">13m</time>

  </li>

  <li>
    <strong>
    <a href="https://busrouter.sg/#/services/67">67</a>
    </strong>

    <time datetime="2022-05-09T15:38:40+08:00">-4m</time>
    <time datetime="2022-05-09T15:43:53+08:00">50s</time>
    <time datetime="2022-05-09T15:47:57+08:00">4m</time>

  </li>

  <li>
    <strong>
    <a href="https://busrouter.sg/#/services/2">2</a>
    </strong>

    <time datetime="2022-05-09T15:38:58+08:00">-4m</time>
    <time datetime="2022-05-09T15:59:37+08:00">16m</time>
    <time datetime="2022-05-09T16:10:26+08:00">27m</time>

  </li>

</ul>