CSSで強調したい文字の上に丸（点）を付ける

See the Pen DotText by webopixel (@webopixel) on CodePen.

HTML

点をつけたい部分をspanで囲み、dot-textクラスを付けます。

1
<h3>一部分を強調させる為に、<br><span class="dot-text">ここに点々をつけて</span>みます。</h3>

CSS

radial-gradient丸いグラデーションを作るスタイルですが、輪郭をくっきりさせることで丸になります。
丸のサイズを変更するときはradial-gradientとbackground-sizeの縦の数値を調節してください。

1
h3 {
2
  font-size: 32px;
3
  letter-spacing: 10px;
4
  line-height: 2;
5
  font-weight: bold;
6
}
7

8
.dot-text {
9
  padding-top: .4em;
10
  background-position: top left -2px;
11
  background-repeat: repeat-x;
12
  background-size: 1.3em .3em;
13
  background-image: radial-gradient(.15em .15em at center center,orange,orange 100%,transparent);
14
}