CSSで文字の上に強調点(・)を付ける

LP などで特定のテキストを強調したい時などに、文字の上に(・)を付ける CSS。
text-emphasis を使えば表現できましたが、少しクセがあったので経緯をメモします。

はじめに、リファレンスは下記。
text-emphasis - CSS: カスケーディングスタイルシート | MDN

セットする値については、ドット、丸、二重丸、三角などがあり、塗りか線かなどのバリエーションを指定することができますし、色味も指定可能です。

text-emphasis: filled dot #555;

ちょうどいい感じのサイズが無い(サイズ指定できない)

ただ、サイズの指定はできないようでした。
デザインとしてあてがうなら、微妙なサイズ変更などにも対応できないと有用性は低いですが、「なんとか使えるな」レベルだったので以下に共有します。

任意の記号を表示させる

デフォルトで選択できる記号は限りがあるのですが、セットできる値には任意のユニコードも含まれていました。
方法としてはややアナログ感がありますが、「自分が表示したいサイズ感のユニコード記号を指定」すれば、間接的にサイズ調整ができることになります。

ユニコード一覧については下記のサイトなどから参照できます。
Unicode一覧表

今回は以下のような感じで指定すると、ちょうどいいくらいのサイズになりました。

text-emphasis: 'B22' orange;