Change direction of negative number with combination of LTR and RTL content

Answer 1

Since your screenshot has the "-2" in a different span element you could is the unicode-bidi option on that specific span:

div{
  direction: rtl;
}

span{
  direction: ltr;
  unicode-bidi: bidi-override;
}

<div>
  امروز 
  <span>-2</span>
</div>

The general idea of unicode-bidi is to have the ability to change the default behavior of directionality of the text where you have multiple languages on the same page.

Since you are using an RTL language, and you want the -2 to appear in LTR, the unicode-bidi: bidi-override is very handy.

Answer 2

The following worked for me:

span {
  unicode-bidi: plaintext;
}

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi

By the way, 'bidi' is short for bidirectional.

Answer 3

You can use the before pseudo element to add a hyphen.

q::before { 
  content: "-";
  color: blue;
}


<q>Some quotes</q>, he said.

Will render as

-Some quotes, he said.