Add css pseudo class on table cell with title attribute

Question

I have a table with data populated with an API Fetch. Some of the cells would have an attribute of "title", in my JSFiddle I have it on the second column. I would like to add an indicator for such cells where there is a tooltip and I have tried with the below css, without success:

td[title]:after {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border-top: 10px solid red;
        border-left: 10px solid transparent;
    }

I should look like the image here:

JSFiddle Demo

score 2 · Accepted Answer · answered Sep 08 '20 at 18:15

2

You have to put content for it

td[title] {
  position: relative;
}
td[title]::after {
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  content: ' ';
  border-top: 10px solid red;
  border-left: 10px solid transparent;
}

answered Sep 08 '20 at 18:15

SoftDev

559
2
8

Add css pseudo class on table cell with title attribute

1 Answers1