css - 如何获取内联 block 元素内的文本以进行识别？

Question

简单地说，这里的复选框是图形化的，因为出于可访问性原因我不想使用复选框元素(只有链接应该响应交互)。

但是在 href 旁边设置一个 span 并让文本缩进以与文本的开头对齐似乎是一个相当大的挑战。 这是 Codepen :

ul { 
  padding: 0px;
  margin: 0px;
  width: 140px;
  background-color: #fffaaa;
  margin-bottom: 10px;
  list-style: none;
}

span.facetapi-check-active {
  background-image: url('https://www.drupal.org/files/project-images/Very-Basic-Checked-checkbox-icon.png');
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  display: inline-block;
}

<ul>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-12">North West & Other Areas</a>
  </li>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-13">Yorkshire and the Humber</a>
  </li>
</ul>

Answer 1

您可以使用 CSS 表格

ul { 
  padding: 0px;
  margin: 0px;
  width: 140px;
  background-color: #fffaaa;
  margin-bottom: 10px;
  list-style: none;
}

li {
  display: table;
}

span.facetapi-check-active {
  background-image: url('https://www.drupal.org/files/project-images/Very-Basic-Checked-checkbox-icon.png');
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  display: table-cell;
}

a {
  display: table-cell;
}

<ul>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-12">North West & Other Areas</a>
  </li>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-13">Yorkshire and the Humber</a>
  </li>
</ul>