Hey everyone, I've been working on some CSS code that changes color based on monetary values:
td[data-monetary-amount]:after,
td[data-monetary-amount^="+"] {
content: attr(data-monetary-amount);
color: green;
}
td[data-monetary-amount^="-"]:after {
color: red;
}
Here's the corresponding HTML:
<table border="1">
<tr>
<td data-monetary-amount="+23"></td>
</tr>
<tr>
<td data-monetary-amount="-20"></td>
</tr>
</table>
The code is functioning perfectly as intended.
Now, I want to include text characters: ↑ and ↓ depending on the + and - signs.
These characters need to be placed before the "+" and "-" respectively.
Therefore, the desired output should look like this:
↑+23
↓-20
I attempted the following:
td[data-monetary-amount]:after,
td[data-monetary-amount^=" (+"],
td[data-monetary-amount^="+"] {
content: attr(data-monetary-amount);
color: green;
content: "↑";
}
Unfortunately, it did not yield the expected results.
It seems there might be an error in my approach somewhere.
Any guidance would be greatly appreciated.