文字上の強調点の装飾について【CSS】

Question

文字の上に色付きの強調点を付けたい

イメージと参考にしたのは

https://code-stock.com/css/howto-text-emphasis/
https://www.webopixel.net/html-css/1494.html

のサイトです。
text-emphasisを使うと簡単に強調点が出来上がるのですが、点のサイズが変えられません。

2つ目の以下のコードを使うやり方は、safariで見たときに表示がおかしくなります。

    padding-top: .4em;
    background-position: top left -2px;
    background-repeat: repeat-x;
    background-size: 1.3em .3em;
    background-image: radial-gradient(.15em .15em at center center,orange,orange 100%,transparent);

他に何か、良い方法はございますでしょうか？
色々と調べましたが、良いやり方が見つからなかったのでここに質問します。

ご回答お願いします!

Answer 1

safariで見たときに表示がおかしくなります

フォントの指定がされていないので各ブラウザのデフォルトのフォントが使用されることになりますが、
Safariで使用されるフォントがプロポーショナルフォントなため、各文字の横幅が異なり、
結果表示がおかしくなる(文字の上にきれいに点が表示されない)のではないでしょうか?

例で出されているようにfont-familyで等角フォントを指定してみてはいかがでしょうか?