使用CSS显示数据属性值

Question

I'm using a WordPress plugin to display events on a calendar. It has the following markup to display days:

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

Instead of displaying "Monday", I'd like it to display "Mon". Is it possible to output the data attribute (data-day-abbr) using CSS?

This would be a prefered workaround, otherwise, I'll need to create child template files.

Answer 1

You can do this by hiding the th content's visibility, and replacing it using CSS' content and attr :

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

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

Answer 2

Access data-day-abbr in CSS and set its value on a pseudo element (before):

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

Answer 3

What you could do is "hide" the text in the th by setting it's font-size to zero.

Than add an :after element and fill it with the data attribute.
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

You can use text-indent and ::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>