HTML CSS Styling for Hebrew Niqqud

The example is displayed in different ways in different browsers, depending on many things including the font(s) used. For example, in my test on Win 7, Firefox shows a bet with dagesh in all black, whereas Chrome and IE show a black bet with a red dagesh that is badly or very badly displaced.

There is no reason why your approach would not work. Neither is there any specification requiring that it should work. Browsers (and other rendering software) can display the combination using a single precomposed glyph, in which case the glyph will obviously be in one color. They can also display the base character and the diacritic mark separately; this could result in the desired rendering, but positioning a diacritic mark is a real challenge, and browsers often fail.

This means that you need a trick of some kind.

A relatively simple trick is to have content that has both the base character (bet in this case) and a combination of the base character and a diacritic mark (here dagesh), set different colors on them, and superimpose them so that the base character is topmost. The main objection is logical: the document then contains the base character appearing with no reason (except the visual rendering). Assuming this is acceptable, here’s how to do it:

[Code edited Dec 16, 2020, to make both of the inner elements absolutely positioned.]

<style>
.colcomb { position: relative }
.colcomb .base, .colcomb .combined  { position: absolute; left: 0; top: 0;  }
.colcomb .base { z-index: 200; }
.colcomb .combined { z-index: 100; }
.colcomb .combined { color: red; }
</style>
<div style = "font-size: 500%">
<span class="colcomb">
     <span class="base">&#1489;</span>
     <span class="combined">&#1489;&#1468;</span>
</span>
</div>