html - 行内 block 内容表现为 block

Question

我有这个setup并且我希望能够将鼠标悬停在 LI 元素之上，并且由于其中包含的链接而使其全部可点击。

如何让 li 项中的第一个链接占用所有可能的空间？

a,
a:hover {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  border-left: 2px transparent solid;
  transition: background 0.10s linear;
  /* vendorless fallback */
  white-space: nowrap;
  position: relative;
  /* so the badge follow the item if scrolling */
}
li:first-child {
  margin-top: 1px;
  padding: 7px 10px;
  border-left: none;
  background: #E8E8E8;
  font-weight: bold;
  transition: background 0s linear;
  /* vendorless fallback */
}
li:first-child:hover {
  border-left: none;
  background: #E8E8E8;
  transition: background 0s linear;
  /* vendorless fallback */
}
li:hover {
  border-left: 2px #F27223 solid;
  background: white;
  transition: background 0s linear;
  /* vendorless fallback */
}
ul li a {
  padding: 7px 10px;
  display: inline-block;
}
ul li .badge {
  margin: 7px 10px;
  min-width: 30px;
  background: red;
  border-radius: 20px;
  text-align: center;
  right: 0;
  position: absolute;
}
ul li .badge a {
  padding: 0 4px;
  color: white;
  margin: 0;
}

<ul>
  <li>
    <span>Menu Header</span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">4</a></span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">3</a>
			</span>
  </li>
  <li>
    <a href="a">
      <span>Bank</span>
    </a>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">19</a></span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">7</a></span>
  </li>
</ul>

Answer 1

使用后代选择器使链接显示 block 并且不以徽章链接为目标，我还通过添加 bottom: 0; 将徽章向上移动到正确的行上。

ul li > a {
   padding: 7px 10px;
   display: block;
}

https://jsfiddle.net/6a7643h9/