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

<span class=”dot-text”>対象の文章</span>

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