Adding a dollar sign next to a span?

Question

I'm working on a budget app that lets the user write in their budget and as many expenses as the user wishes. The total budget, expenses, and balance (each of these is a span tag in HTML) are kept in a container div.

I want to add a dollar sign next to each of these spans. How do I add a dollar sign that sits right next to the amount? I need to make it a separate tag from the money tags.

I tried adding it in the form of a template string such as

amount.innerHTML = `$${tempAmount}`
expenditureValue.innerText = `$${sum};

However, doing this results in messing up with numbers adding together. Adding more than one expense results in "NaN" appearing on the page.

I also tried adding it into the HTML page, but the dollar sign is skewed from the number result. It ends up looking like:

$
    10000

Any advice on what I can do?

Answer 1

You can always add a pseudo-element and set its content using CSS.

const num = document.querySelector('.amount').textContent = 20;

.amount::before {
  content: '$';
}

<div class="amount"></div>