Question

考虑以下HTML：

<table>
  <thead>
      <tr>
          <th class="title">Test title</th>
      </tr>
  </thead>
</table>

以下CSS：

table {
    width: 400px;
    border: 1px solid #ccc;
}

th.title {
    position: relative;
    text-align: center;
}

th.title::after {
    position: absolute;
    right: 5px;
    content: '>';
}

请参阅JSFiddle http://jsfiddle.net/63EZB/1。

我想要的是th右侧出现的大于号。上面的代码适用于Chrome和IE8 +，但不适用于Firefox（28）。 Firefox会在窗口右侧绝对定位符号，例如relative元素的th位置不予考虑。

出了什么问题？

Answer 1

正在寻找类似 Link

的内容

CSS：

th.title::after {       
    margin-right: 5px;
    float:right;
    content:'>';
}

Answer 2

尝试使用这些规则：

th.title:after {
   position:relative;
   float:right;
   right: 5px;
   content: '>';
}

Answer 3

据我了解（我很少使用表格），表格元素与绝对或相对定位不能很好地混合。

我只是将一个持有div放在th里面，然后给位置相对和伪元素。

这也可以为您提供一些想法：http://css-tricks.com/absolutely-position-element-within-a-table-cell/

伪元素的定位如：在Firefox之后

3 个答案: