よく本を読んでいると、文字を強調したい時に点々が打ってあるのを見ます。
私は強調したい所にはマーカーを引きますが、デザイナーがそういう強調表示のデザインを組んできた時、どのような方法が取れるでしょうか。
見た目だけをデザイン通りに整えるのは難しいことではありませんよね。

text-emphasisを使う

text-emphasisをご存じでしょうか？
文字の上に強調の点々を付けるプロパティです。

https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis

元々こういう物が用意されているんです。
しかし、なかなか思い通りにはなりません。

text-emphasis: dot;

上記のように指定すると、・が文字の上に付きます。

text-emphasis: circle;

上記のように指定すると、●が文字の上に付きます。

・と●
比較するとわかると思いますが、大きさが極端過ぎるんですよ！
もうちょっと間の大きさがあっても良さそうなのに・・・
ちょっとデザイン的に使いにくいです・・・

疑似要素で点を作る？

See the Pen 点々による文字の強調表示 by Uilou (@uilou754) on CodePen.

上記のコードでは、強調表示する文字を1つずつspan.tenで囲っています。
.tenに疑似要素で、点を付けている状態です。

確かにやりたいことは実現できていますが、HTMLを見ると明らかにスマートではないです。
これではクローラーが解析する時、困りますよね。
この例は、機械に優しくない＝セマンティックなコーディングではないです。
では、どうするか。

文字を強調する点々を付けるには、radial-gradientを使う

See the Pen 点々による文字の強調表示02 by Uilou (@uilou754) on CodePen.

上記の例を見てください。
強調部分をstrongタグでまとめて囲うことが出来ていて、セマンティックな書き方になったと思いませんか？
Googleがstrongをどういう風に評価しているか知りませんが、1文字1文字タグを分けるよりも、こちらの方が解析しやすいことは確かだと思います。

今回使用しているのはbackground-imageのradial-gradientです。
radial-gradientは名前の通り、背景にグラデーションをかけるものですが、あえてグラデーションをさせない使い方もあります。今回はその良い例です。
他にも点線を引くのに使うこともあります。

background-sizeの調整で、文字サイズが違ってもピッタリ位置調整

今回のサンプルでは文字サイズの異なる部分でも同様に使えるようになっています。
仕組みとしては、background-sizeで『1em』を指定していますので、背景のサイズが要素の文字サイズと同一になるように調整されています。

※ただし、background-size自体は同じ大きさを繰り返すだけなので、等幅フォントにしか対応できません。

text-emphasisとradial-gradientの比較

結局、文字の点々は何で対応すれば良いのかという話ですが、PC・タブレットサイズではradial-gradientを使用し、スマホではtext-emphasisを使用するのが良いんじゃないかなーって思います。

理由は以下の通りです。

radial-gradientはSafari環境に対して正常に表示できない可能性が高いです。
text-emphasisはちゃんと表示されるのですが、点の大きさ（●か・と大きさの選択肢が極端）や文字からの位置を調整できないので、間延びした感じになってしまいます。

なので、iOS利用率が高いスマホではtext-emphasysを利用し、PCではより表現しやすいradial-gradientを使用するのが良いのかなって思います。

点の色変更はBEMで実装

強調するための点々の色を変更する場合もあるでしょう。
そういう時には、BEMで実装すると良いです。
具体的には以下のような感じ

strong.ten {
    padding-top: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #f60 20%, transparent 20%);
}
strong.ten.ten--blue {
    background-image: radial-gradient(circle at center, #22f 20%, transparent 20%);
}

strong.ten {
    padding-top: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #f60 20%, transparent 20%);

    &--blue {
        background-image: radial-gradient(circle at center, #22f 20%, transparent 20%);
    }
}

BEMを導入する理由としては、CSSの汚染度を下げるためです。
例えば、以下のように定義しちゃうとどうなるか

.ten {
    padding-top: 10px;
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.5em;
    background-image: radial-gradient(circle at center, #f60 20%, transparent 20%);
}
.ten.blue {
    background-image: radial-gradient(circle at center, #22f 20%, transparent 20%);
}

class=”ten”が指定されていて、さらにclassに”blue”が付いている時には、点が青くなります。
一見これでも良さそうです。

しかし、こういう書き方をする人は、別のところでも以下のような書き方をします。

.font {
    font-family: sans-serif;
}
.font.red {
    color: red;
}
.font.green {
    color: green;
}
.font.blue {
    color: blue;
}

さて、これらが合わさった時、どうなるでしょうか？

<p class="font ten blue">普通のフォントに強調するための青い点を打ちたい</p>

class=”font blue”とclass=”ten blue”のblueが重なってしまって、文字まで青くなってしまうんです。
これがCSSの汚染であり、長期安定運用の妨げになる物です。

自身の作った物が、将来に渡って作業の邪魔をしないこと、他人の手に渡っても邪魔をしないこと
これが作る人の責任です。
完全に防ぐことは難しいかもしれないけど、なるべくリスクを減らす努力をしていきましょう。