html - 对齐 2 :after contents below each other

Question

我一直在试验高级选择器，直到现在它一直很顺利。我正在尝试在表格中将 2 个插入符号彼此对齐。使它看起来像行是可排序的。但是我无法让它正常工作，而且我在谷歌上找不到关于这个特定问题的任何信息。

如果有人可以帮助我解决这个问题或提供信息，我将不胜感激。

HTML:

<div id="table">
    <table>
        <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
            <td>Column5</td>
            <td>Column6</td>
            <td>Column7</td>
            <td>Column8</td>
            <td>Column9</td>
            <td>Column10</td>
            <td></td>
        </tr>
    </table>
</div>

CSS:

#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
    font-family: FontAwesome;
    content: "\f0d7" ' ' "\f0d8";
    float:right;
}

JSFIDDLE

http://jsfiddle.net/jk62x5ox/

Answer 1

#table table {
  margin-top: 40px;
  width: 100%;
  border: none;
  border-collapse: collapse;
}
#table td {
  padding: 0 5px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
#table tr {
  background: #dbe5f1;
}
#table td:first-child {
  border-left: none;
}
#table td:last-child {
  border-right: none;
  padding-right: 0;
}
#table tr td:last-child:before {
  font-family: FontAwesome;
  content: "\f05c";
  font-size: 18px;
}
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
  font-family: FontAwesome;
  content: "\f0d8"' '"\f0d7";
  float: right;
  width: 5px;
  line-height: 0.5;
}

<div id="table">
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
      <td>Column4</td>
      <td>Column5</td>
      <td>Column6</td>
      <td>Column7</td>
      <td>Column8</td>
      <td>Column9</td>
      <td>Column10</td>
      <td></td>
    </tr>
  </table>
</div>