Posted: 2019.02.28 / Category: HTML&CSS 

CSSを使用して指定した文字の上に丸をつけて強調してみます。

HTML

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

html

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

CSS

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

css

h3 {
	font-size: 32px;
	letter-spacing: 10px;
	line-height: 2;
	font-weight: bold;
}

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