css - 是否可以使用属性在没有 Javascript 而只有 CSS 的情况下创建/重新格式化内容？

Question

JS-Fiddle example

<time datetime="2020-1-1"> </time>

使用 CSS:

time:empty:after{content:attr(datetime)}

显示:

2020-1-1

但我能以某种方式重新格式化它，得到类似的东西吗:

01/01/19

不使用 Javascript，而只使用 CSS？ 我确定已经有人问过这个问题并在某个地方得到了回答，但我就是找不到。

Answer 1

如果您可以解析 HTML 中的日期，那么您可以选择每个数字并根据需要构建字符串。我不确定这对您来说是否是一种合理的方法，但我想我会发帖以防万一。

time {
  border: 1px solid black;
}

time:empty {
  border: 1px solid red;
}

time:empty::after {
  content: attr(data-month)"/"attr(data-day)"/"attr(data-year);
}

<time datetime="2020-01-01" data-year="20" data-month="01" data-day="01"></time>