Можно ли использовать атрибут для создания / переформатирования контента без Javascript, но только с CSS?

Question

Пример JS-Fiddle

<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>