html - 在::before 元素中堆叠两个字符的语义方式？

Question

我正在尝试将 list 符号添加到表格单元格的左边缘。到目前为止，这确实有效。但是，当我试图在 list 符号顶部堆叠另一个字符时，事情变得很难看。我找到了几种方法来实现我所追求的结果，但对我来说没有一种看起来特别好。有没有人有更好的想法，最好是可以专注于语义的想法？

.checklist::before {
  content: "◯ ";
}
.checklistabs::before {
  content: "◯ ";
  position: absolute;
}
.check::before {
  content: " ✘";
  position: absolute;
  font-size: 130%
}
.checked {
  position: absolute;
  font-size: 130%
}
.checklisttext {
  margin-left: 1.5em;
}

<table>
  <tr>
    <td class="checklist">
      perfect as long as nothing needs to be overlaid 
    </td>
  </tr>
  <tr>
    <td>
      <b class="checked">✘</b>
      ◯ Seems to work best, but has explicit bullet symbol as part of the text.
    </td>
  </tr>
  <tr>
    <td>
      <div class="checklistabs" />
      <div class="check" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If the bullet symbol goes into another absolutely positioned item, we need to make space at the beginning of the text. ::before would have been much more elegant.
    </td>
  </tr>
  <tr>
    <td class="checklist">
      <div class="check" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;why does this introduce a linebreak?

    </td>
  </tr>
  <tr>
    <td class="checklistabs">
      <div class="check" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Saving on divs
    </td>
  </tr>
  <tr>
    <td>
      <div class="checklistabs" />
      <div class="check" />
      <div class="checklisttext">So this works...</div>
    </td>
  </tr>
  <tr>
    <td class="checklist check">
      Looks preferrable from a semantic point of view but does not work - see http://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element
    </td>
  </tr>
</table>

Answer 1

如果同时定位 ::before和 ::after绝对并向 <td> 添加填充元素你可以得到你想要的效果。它需要更多的 CSS 和一些与字体大小密切相关的值。但是如果你改变 px值为 em它应该可以很好地扩展。

table {
  width: 350px;
}
 
.checklist {
  padding: 0 0 0 20px;
  position: relative;
}

.checklist::before,
.checked::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  text-align: center;
  line-height: 20px;
}

.checklist::before {
  content: "◯ ";
}

.checked::after {
   content: " ✘";
   font-size: 130%;
}

<table>
  <tr>
    <td class="checklist checked">
      A little more CSS and positioning, but will work well if the text linebreaks.
    </td>
  </tr>
</table>