javascript - tablesort.js 如何创建排序指示箭头

Question

我最近找到了 tablesort.js组件，它允许使纯 HTML 表格的行可排序。请看this fiddle举个小例子。

我试图了解表头中的排序指示符(向上/向下箭头)是如何创建的。

tablesort.js 使用的 CSS 非常精简，不包含任何(背景)图像。查看 javascript 代码和使用浏览器的开发人员工具也没有帮助我理解指标的创建方式。

谁能解释一下这些指标是如何创建的？

---

这是 tablesort.js 使用的 CSS:

th.sort-header {
  cursor:pointer;
  }
th.sort-header::-moz-selection,
th.sort-header::selection {
  background:transparent;
  }
table th.sort-header:after {
  content:'';
  float:right;
  margin-top:7px;
  border-width:0 4px 4px;
  border-style:solid;
  border-color:#404040 transparent;
  visibility:hidden;
  }
table th.sort-header:hover:after {
  visibility:visible;
  }
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
  visibility:visible;
  opacity:0.4;
  }
table th.sort-up:after {
  border-bottom:none;
  border-width:4px 4px 0;
  }

Answer 1

他们正在使用伪元素:

table th.sort-header:hover:after {
    visibility: visible;
}
table th.sort-header:after {
    content: '';
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #404040 transparent;
    visibility: hidden;
}

然后他们切换一个类来改变 border-width 样式，从而改变箭头。

编辑:澄清一下，border-width 样式是箭头形状的原因。