使用CSS显示数据属性值

Question

我正在使用WordPress插件在日历上显示事件。它具有以下标记来显示日期：

<th id="tribe-events-monday" title="Monday" data-day-abbr="Mon">Monday</th>

我希望不显示“星期一”，而是显示“星期一”。是否可以使用CSS输出数据属性（data-day-abbr）？

这将是首选的解决方法，否则，我将需要创建子模板文件。

Answer 1

您可以通过隐藏th内容的可见性，然后使用CSS' content和替换它来实现attr：

[data-day-abbr]:before {
  content: attr(data-day-abbr);
  visibility: visible;
}

th {
  visibility: hidden;
}

<table>
  <tr>
    <th id="tribe-events-monday" title="Monday" data-day-abbr="Mon">Monday</th>
  </tr>
</table>