Question

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

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

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

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

Answer 1

您可以通过隐藏Username:~ Username$ sudo easy_install pip Password: Searching for pip Best match: pip 19.1.1 pip 19.1.1 is already the active version in easy-install.pth Installing pip script to /usr/local/bin Installing pip3.7 script to /usr/local/bin Installing pip3 script to /usr/local/bin Using /Library/Python/2.7/site-packages Processing dependencies for pip Finished processing dependencies for pip Username:~ Username$ pip -bash: pip: command not found内容的可见性并使用CSS的th和content来替换它来实现：

attr

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

th {
  visibility: hidden;
}

Answer 2

在CSS中访问data-day-abbr并将其值设置为伪元素（之前）：

#tribe-events-monday:before {
     content: attr(data-day-abbr);
}

Answer 3

您可以通过将th中的字体大小设置为零来“隐藏”文本。

比添加:after元素并用data属性填充它。
More information

th {
  border: 1px solid black;
  font-size: 0;
}
th:after {
  content: attr(data-day-abbr);
  font-size: 12px;
}

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

Answer 4

您可以使用text-indent和:: before

[data-day-abbr] {
  text-indent: -100vw;/* at least enough to hide text */
}
[data-day-abbr]::after {
  content: attr(data-day-abbr);
  float:left;/* or display: block;*/
  text-indent: 0;
}

<table>
  <tr>
<table>
  <tr>
    <th title="Monday"    data-day-abbr="Mon">Monday</th>
    <th title="Tuesday"   data-day-abbr="Tue">Tuesday</th>
    <th title="wednesday" data-day-abbr="Wed">Wednesda</th>
    <th title="Thursday"  data-day-abbr="Thu">Thursday</th>
    <th title="friday"    data-day-abbr="Fri">friday</th>
    <th title="Saturday"  data-day-abbr="Sat">Saturday</th>
    <th title="Sunday"    data-day-abbr="Sun">Sunday</th>
  </tr>
</table>
  </tr>
</table>

使用CSS

4 个答案: