Display data attribute value with 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.

j08691 · Accepted Answer · 2019-06-25 14:42:01Z

7

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>

answered Jun 25, 2019 at 14:42

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tmpacifitech Over a year ago

I recommend this answer as a perfect one.

Sam Over a year ago

Great answer. Am I correct in thinking that screen readers will still have the ability to read the days of the week?

Bluesight · Accepted Answer · 2019-06-25 14:39:52Z

1

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

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

answered Jun 25, 2019 at 14:39

Bluesight

7641 gold badge11 silver badges29 bronze badges

Comments

GreyRoofPigeon · Accepted Answer · 2019-06-25 14:42:49Z

0

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>

answered Jun 25, 2019 at 14:42

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Comments

G-Cyrillus · Accepted Answer · 2019-06-25 14:49:56Z

0

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>

edited Jun 25, 2019 at 14:49

answered Jun 25, 2019 at 14:43

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Collectives™ on Stack Overflow

Display data attribute value with CSS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related