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

Question

我最近发现了tablesort.js组件，它允许将普通HTML表的行排序。关于一个小例子，请参阅这把小提琴。

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

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;
}

然后，他们切换一个类来更改边框宽度样式，从而更改箭头。

编辑:为了澄清，边框宽度的样式是什么使箭头形状.