CODEWITHSUNDEEP
csshtml
Don Question
Don Question

Reputation: 11614

Can an attribute be used to create/reformat content without Javascript, but only CSS?

JS-Fiddle example

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

with css:

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

shows: 

2020-1-1

but can i reformat it somehow, to get something like:

01/01/19

without using Javascript, but only CSS? I'm sure this has been already asked an been answered somewhere, but I just can't find it.

Upvotes: 0

Views: 59

Answers (1)

JRoss
JRoss

Reputation: 1395

If you can parse the date in HTML then you can pick up each number and build the string however you'd like. I'm not sure if this would be a reasonable approach for you but I figured I'd post just in case.

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>

Upvotes: 3

Related Questions