【CSS】傍点（テキストの上に点）をつける方法

強調したい文字の上に打つ点、傍点を付ける方法です。

1.疑似要素を使用

メリット
・傍点の大きさ、位置を調整できる

デメリット
・1文字ごとに<span></span>で囲む必要があるので、傍点をつけるテキストが長い場合は大変...

▼実装サンプル
HTML

<p class="text01">テキストに<span class="emphasis01">傍</span><span class="emphasis01">点</span>をつけて<span class="emphasis01">強</span><span class="emphasis01">調</span>させる</p>

CSS

.emphasis01{
   display: inline-block;
   position: relative;
}
.emphasis01::before{
   position: absolute;
   top: -0.5em;
   left: 50%;
   transform: translate(-50%, 0);
   color: #fa3c5a;
   font-size: 1.5em;
   content: "・";
}

！注意！
spanにdisplay: inline-block;の指定がないと、意図せず改行が入ったときに、傍点がずれてしまいます。

<縦書きの場合>

CSS

body {
 writing-mode: vertical-rl;/*縦書きにする*/
}
.emphasis01{
   display: inline-block;
   position: relative;
}
.emphasis01::before{
   position: absolute;
   top: 50%;
   right: -50%;
   transform: translate(0, -50%);
   color: #fa3c5a;
   font-size: 1.5em;
   content: "・";
}

2.「text-emphasis」プロパティを使用

メリット
・傍点をつけたいテキストを一括<span></span>で囲むだけなので、傍点をつけるテキストが長くても問題なし！

デメリット
・傍点のサイズが調整できない。
サイズは自動でフォントの50%になります。
位置は、「text-emphasis-position」プロパティを使用し、横書きモードで上か下、縦書きモードで右か左と指定できますが、標準で最適な位置に設置されるので使うことはほぼ無いと思います。

▼実装サンプル
・値：dotの場合

HTML

<p class="text02">テキストに<span class="emphasis02">傍点</span>をつけて<span class="emphasis02">強調</span>させる</p>

CSS

.emphasis02{
 text-emphasis: dot #fa3c5a;
 -webkit-text-emphasis: dot #fa3c5a;
}

・値：circleの場合

HTML

<p class="text03">テキストに<span class="emphasis03">傍点</span>をつけて<span class="emphasis03">強調</span>させる</p>

CSS

.emphasis03{
 text-emphasis: circle #fa3c5a;
 -webkit-text-emphasis: circle #fa3c5a;
}

<縦書きの場合>
最適な位置に設置されるので、横書きの場合と書き方は同じです。

2-1.「text-emphasis」プロパティの値

「text-emphasis」プロパティは「●」「・」以外にも、複数の値が指定できます。

・値：sesame

.emphasis04{
 text-emphasis: sesame #fa3c5a;
 -webkit-text-emphasis: sesame #fa3c5a;
}

・値：double-circle

.emphasis05{
 text-emphasis: double-circle #fa3c5a;
 -webkit-text-emphasis: double-circle #fa3c5a;
}

openを一緒に指定すると白抜きになります

.emphasis06{
 text-emphasis: open double-circle #fa3c5a;
 -webkit-text-emphasis: open double-circle #fa3c5a;
}

・値：triangle

.emphasis07{
 text-emphasis: triangle #fa3c5a;
 -webkit-text-emphasis: triangle #fa3c5a;
}

2-2.ブラウザサポート状況

IE以外のブラウザでサポートされています。（2021年6月24日現在）
FirefoxやSafari以外のブラウザでは、ベンダープレフィックス「-webkit-text-」をつける必要があります。

▼text-emphasisのブラウザサポート状況 | Can I use
https://caniuse.com/?search=text-emphasis

2-3.参考サイト

こちらの記事を参考にさせていただきました。
▼text-emphasis | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis

3.サンプルコード

<横書きモード>

<縦書きモード>