| 18:03 | <MassDebates> | Hello. I'm looking for an answer to a question of mine. |
| 18:03 | <MassDebates> | I've tried a couple different spots, but maybe this is the right spot. |
| 18:03 | <MassDebates> | I've got some CSS that isn't behaving the way I expect. Here it is: |
| 18:03 | <MassDebates> | td:hover::after{content: calc( ( var(--data-two) / var(--data-one) * 100 ) ) "%";} |
| 18:04 | <MassDebates> | Is this something I should expect to be able to do with CSS variables inside of a pseudo element's content property? |
| 18:13 | <TabAtkins> | MassDebates: 1) Make sure your two variables are both numbers; calc() doesn't support dividing by a value-with-unit yet, even things like `calc(20px / 5px)`. 2) More importantly, no, this won't work in any case - the calc() will resolve to a <number>, which isn't valid in the 'content' grammar; it only accepts strings. |
| 18:19 | <MassDebates> | Thank you TabAtkins |
| 18:20 | <MassDebates> | I have some table cells and I thought it'd be really neat to use either data attributes or custom css props to display a :hover tooltip with a converted value |
| 18:20 | <MassDebates> | I will use javascript |