有没有办法使用 CSS 使用特定格式来格式化日期，例如YYYY/MM/DD，还是 MM/DD/YYYY，有没有时间？
也可以将数字格式化为带有 2 位小数的百分比值，例如5.4321987 显示为 5.43%
我可能会使用 JavaScript，但我想先知道是否可以使用 CSS 来做到这一点？
【问题讨论】：
是的，可以仅使用 CSS 格式化日期。这包括更改年/月/日显示顺序、日期之间的分隔符、显示/隐藏前导零、将 4 位数年份显示为 2 位数年份（例如 1994 变为 '94），可以扩展到包括小时/分钟/秒/等，甚至可以在段落内内联。它允许稍后仅使用 CSS 重新格式化静态 HTML。这提供了极大的灵活性，不需要学习 Javascript，而且我自己使用它来格式化 Anki 卡片（使用 HTML 和 CSS）上的日期。
首先有一些限制：它不适用于旧浏览器，它需要修改源 HTML，它需要源日期前导零保持一致（始终存在或始终不存在），而且它不是特别优雅。如果您已经了解 Javascript，那将是一个更强大、更优雅的解决方案。
该解决方案使用弹性框来允许更改元素的顺序，并将日期值放在 HTML 自定义属性中，以便 CSS 能够读取。点击下例中的Run Code Snippet，查看day=3、month=9和year=1994如何通过CSS格式化为March 09, '94。
<div class="date-wrapper">
<div class="date-year" val="1994"></div>
<div class="date-month" val="03"></div>
<div class="date-day" val="09"></div>
</div>
/* Setup for date flexbox */
.date-wrapper {
align-items: baseline;
background: #f00;
display: inline-flex;
}
.date-year,
.date-month,
.date-day {
display: inline-block;
}
/* Set date display order */
.date-year { order: 3; }
.date-month { order: 1; }
.date-day { order: 2; }
.date-suffix { order: 4; }
/* Display dates based on "val" custom attribute in HTML */
.date-year::after,
.date-month::after,
.date-day::after {
content: attr(val);
}
/* Add separators */
.date-year::before { content: ", "; }
.date-month::before { content: "★"; }
.date-day::before { content: "\00a0"; } /* \00a0 is a non-breaking space */
.date-suffix::before { content: "★"; }
/* Convert month numbers to month text */
.date-month[ val="1"]:after{ content: "January"; }
.date-month[ val="2"]:after{ content: "February"; }
.date-month[ val="3"]:after{ content: "March"; }
.date-month[ val="4"]:after{ content: "April"; }
.date-month[ val="5"]:after{ content: "May"; }
.date-month[ val="6"]:after{ content: "June"; }
.date-month[ val="7"]:after{ content: "July"; }
.date-month[ val="8"]:after{ content: "August"; }
.date-month[ val="9"]:after{ content: "September"; }
.date-month[val="10"]:after{ content: "October"; }
.date-month[val="11"]:after{ content: "November"; }
.date-month[val="12"]:after{ content: "December"; }
/* Add leading zero to days */
.date-day[val="1"]:after{ content: "01"; }
.date-day[val="2"]:after{ content: "02"; }
.date-day[val="3"]:after{ content: "03"; }
.date-day[val="4"]:after{ content: "04"; }
.date-day[val="5"]:after{ content: "05"; }
.date-day[val="6"]:after{ content: "06"; }
.date-day[val="7"]:after{ content: "07"; }
.date-day[val="8"]:after{ content: "08"; }
.date-day[val="9"]:after{ content: "09"; }
/* Display 4-digit years as 2-digit years (e.g. 1994 becomes '94) */
/* As far as I can tell, doing this fully requires 100 lines of CSS which kinda sucks */
.date-year[val="1990"]:after{ content: "'90"; }
.date-year[val="1991"]:after{ content: "'91"; }
.date-year[val="1992"]:after{ content: "'92"; }
.date-year[val="1993"]:after{ content: "'93"; }
.date-year[val="1994"]:after{ content: "'94"; }
.date-year[val="1995"]:after{ content: "'95"; }
.date-year[val="1996"]:after{ content: "'96"; }
.date-year[val="1997"]:after{ content: "'97"; }
.date-year[val="1998"]:after{ content: "'98"; }
.date-year[val="1999"]:after{ content: "'99"; }<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis lacus non risus consectetur aliquet. Duis placerat ac nulla eu
<span class="date-wrapper">
<span class="date-year" val="1994"></span>
<span class="date-month" val="3"></span>
<span class="date-day" val="9"></span>
<span class="date-suffix"></span>
</span>
lobortis. Integer vulputate, metus eget maximus pretium, nisl orci ultrices
quam, sit amet rutrum lacus neque vitae turpis.</p>使用相同的搜索和替换技术可以将数字显示更改为百分比，但由于日期是有限的（只有 12 个月和 31 天可以处理）但数字是无限的，这仅在处理数字时有用在很小的范围内。例如，如果您只是将 3.59 更改为 3.6%，那么这很容易。对于其他任何事情，Javascript 或其他脚本会更加优雅。
/* Display 3.59 as 3.6% */
.num-to-percent[val="3.59"]::after{ content:"3.6%"; }<span class="num-to-percent" val="3.59"></span>【讨论】：
CSS 无法做到这一点。您需要使用 JavaScript。
【讨论】：
Css 不能用于格式化日期。使用 php 或 javascript 来执行此操作。
【讨论】：
CSS 不支持日期格式。您不能使用 css 格式日期。
在这里让我分享一下替代选项，除了 javascript，还有 html5 元素可以帮助你。
您可以为此使用time-element。此 html 元素将帮助您格式化和显示日期。
注意：在使用此之前，请确保并阅读此元素的浏览器支持如果您将在公共 html 页面中使用。
【讨论】：
<time> 是一个 HTML5 标签。没有 CSS 可以格式化日期或时间，您可以将其应用于此元素或任何其他元素。在您提供的链接上根本没有提到 CSS 格式。
我认为 CSS 不能格式化日期或百分比格式。
如果你想格式化日期或者百分比格式，我觉得用PHP最好
【讨论】：