Create a general currency symbol mixin for any [small] text

I have to show some prices in different places on a site I am building. For that, I created a sass mixin that should help to create the currency symbol I want before the price and with a smaller font-size. An example of what the prices should look like and how my mixin ended up are shown below.

My mixin:

@mixin add-currency($symbol: "R$") {
  margin-left: 17px;
  position: relative;
  &::before {
    bottom: 0px;
    content: $symbol;
    @include s.font(12);
    left: -17px;
    position: absolute;
  }
}

How my prices should look like:

As you can see, the currency symbol should be aligned with the baseline of the number, but in some cases the symbol ends up aligned with the bottom-most point of the comma, like this:

For the examples above, where the symbol isn't properly aligned, their css look like this:

First wrong example:

color: #1e273a;
font-family: "Roboto";
font-size: 1rem;
font-weight: 500;
line-height: 1.3333333333rem;
margin-left: 17px;
position: relative;

Second wrong example:

margin-left: 17px;
position: relative;
font-family: "Roboto";
font-size: 1.5625rem;
font-weight: 600;
line-height: 2.0833333333rem;

I haven't found what, in the examples above, could be leading to this misalignment in the currency symbol, and also haven't found a way to correct this. The ideia behind my mixin is to make possible to just add this to any [small] text and add to it the chosen currency symbol, and although I know it won't work for every possible case, I believe for these two cases my mixin should work, right?

Thanks in advance for your attention

The currency symbol in your mixin may be misaligned due to the difference in line-height between the symbol and the pricing text.

If we have the solution for that line-height fixing we will be having the solution then:

Might be that adjustment of line-height with inherit property will solve the issue.

@mixin add-currency($symbol: "R$") {
  margin-left: 17px;
  position: relative;
  &::before {
    bottom: 0;
    content: $symbol;
    @include s.font(12);
    left: -17px;
    position: absolute;
    line-height: inherit; 
  }
}