Identifying monetary values in round brackets (CSS)

So I have these codes, that work wonderfully, when the monetary values are clean:

td[data-monetary-amount]:after {
  content: attr(data-monetary-amount);
  color: green;
}

td[data-monetary-amount^="-"]:after {
  color: red;
}

<table border="1">
  <tr>
    <td data-monetary-amount="+23"></td>
  </tr>
  <tr>
    <td data-monetary-amount="-20"></td>
  </tr>
</table>

The above code works great when the values start with "+" or "-".

My question is, how to identify values that are in round brackets?

For example:

<table border="1">
<tr>
<td data-monetary-amount="(+23)"></td>
</tr>
<tr>
<td data-monetary-amount="(-20)"></td>
</tr>
</table>

I'm getting data (with rounded brackets) from external websites with xpath, so there's no way to remove those round brackets.

The only logical way I could think of for this to work is to somehow skip the "(" or ignore them to identify the monetary values.

Any help would be appreciated.

thanks.