LP などで特定のテキストを強調したい時などに、文字の上に(・)を付ける CSS。text-emphasis
を使えば表現できましたが、少しクセがあったので経緯をメモします。
はじめに、リファレンスは下記。
text-emphasis - CSS: カスケーディングスタイルシート | MDN
セットする値については、ドット、丸、二重丸、三角などがあり、塗りか線かなどのバリエーションを指定することができますし、色味も指定可能です。
text-emphasis: filled dot #555;
ちょうどいい感じのサイズが無い(サイズ指定できない)
ただ、サイズの指定はできないようでした。
デザインとしてあてがうなら、微妙なサイズ変更などにも対応できないと有用性は低いですが、「なんとか使えるな」レベルだったので以下に共有します。
任意の記号を表示させる
デフォルトで選択できる記号は限りがあるのですが、セットできる値には任意のユニコードも含まれていました。
方法としてはややアナログ感がありますが、「自分が表示したいサイズ感のユニコード記号を指定」すれば、間接的にサイズ調整ができることになります。
ユニコード一覧については下記のサイトなどから参照できます。
Unicode一覧表
今回は以下のような感じで指定すると、ちょうどいいくらいのサイズになりました。
text-emphasis: 'B22' orange;