Adding characters (using CSS) in front of the text

Question

Ok, so I have this CSS code that changes the color according to the monetary value:

    td[data-monetary-amount]:after,
    td[data-monetary-amount^="+"] {
      content: attr(data-monetary-amount);
      color: green;
    }
    
    td[data-monetary-amount^="-"]:after {
      color: red;
    }

and HTML:

    <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.

What I want to do is to add text characters: ↑ and ↓ according to the + and -.

These characters should be added in front of "+" "-".

So the output should be:

↑+23

↓-20

I have tried:

    td[data-monetary-amount]:after,
    td[data-monetary-amount^=" (+"],
    td[data-monetary-amount^="+"] {
      content: attr(data-monetary-amount);
      color: green;
      content: "↑";
    }

But it didn't work.

I know I'm making a mistake somewhere.

Need help.

Mohd Salman · Accepted Answer · 2021-03-23 10:20:28Z

You can use the pseudo :before and :after selector. Check out the below solution.

td[data-monetary-amount]:after,
    td[data-monetary-amount^="+"] {
      content: attr(data-monetary-amount);
      color: green;
    }
    td[data-monetary-amount^="+"]:before{
    content: '↑';
    }
    td[data-monetary-amount^="-"]:after {
      color: red;
    }
    td[data-monetary-amount^="-"]:before{
    content: '↓';
    color: red;
    }

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

If you got your answer, give me +1 and select my answer.

ed2 · Accepted Answer · 2021-03-23 10:09:13Z

1

Check out the pseudo before selector:

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

You can use it to change both styling and content, with content being how you insert those characters (e.g. using their html codes).

answered Mar 23, 2021 at 10:09

ed2

1,4971 gold badge12 silver badges29 bronze badges

1 Comment

ed2 Over a year ago

No problem, if this was it, please consider marking it as the correct answer so that future searchers may also benefit.

Zia ur Rehman · Accepted Answer · 2021-03-23 10:34:58Z

1

Here is absolute solution

// for arrow up

td[data-monetary-amount]:after,
td[data-monetary-amount^=" (+"],
td[data-monetary-amount^="+"] {
   content: "\2191 "attr(data-monetary-amount);
   color: green;
}


// for arrow down

td[data-monetary-amount]:after,
td[data-monetary-amount^=" (-"],
td[data-monetary-amount^="-"] {
   content: "\2193 "attr(data-monetary-amount);
   color: red;
}

answered Mar 23, 2021 at 10:34

Zia ur Rehman

5754 silver badges15 bronze badges

Collectives™ on Stack Overflow

Adding characters (using CSS) in front of the text

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related