HTML5的'data-'属性覆盖了CSS'content'属性

Question

我看得远远，无法找到对此行为的解释。

为什么HTML5的data-属性会覆盖公共元素上的CSS content属性？

例如，我定义了以下元素：

<th data-module-field="name" class="sortable sorted desc" data-bind="click:sort">Name</th>

我的CSS课程如下：

.sortable.sorted.desc:after {
    content: url(../Images/desc.gif);
    margin-left: 3px;
}

设置data-module-field属性后，CSS类中定义的内容图像不会显示。但是，如果我删除此属性的data-部分（如下所示），则内容图像会正确显示。

<th module-field="name" class="sortable sorted desc" data-bind="click:sort">Name</th>

有人可以解释为什么会出现这种情况吗？