Question

我在可排序的html表中有一个标题行。我想在当前排序的列上显示向上箭头/向下箭头。我知道我可以使用背景图像，但该网站是第三方托管，我无法上传图像文件。只编辑样式表。

无论如何通过CSS“绘制”箭头并将其粘贴在后台？或者也许使用after和content来完成类似的事情？ th有类表示排序与排序。

<table>
    <thead>
        <th class="sortup">A</th> <!-- Draw an arrow via CSS? -->
        <th>B</th>
        <th>C</th>
    </thead>
    <tr>
        <td></td>
        <td></td>
        <td></td>        
    </tr>  
</table>

Answer 1

向上箭头：

th:after {
    content:"";
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #007bff transparent;
}

对于向下箭头：

th:after {
    content:"";
    border-style: solid;
    border-width: 10px 8px 0 8px;
    border-color: #007bff transparent transparent transparent;
}

以下是演示：http://jsfiddle.net/GLz2b/

Answer 2

您可以使用：before /：after伪元素：

.sortup:after {
  content:"\25BC";
  float:right;
}
.sortdown:after {
  content:"\25B2";
  float:right;
}

演示：http://jsfiddle.net/9KHkp/1/

使用的字符：

可以使用url(/path/to/image.png)代替content属性。

CSS背景 - 是否有可能画出一些东西？

2 个答案: