CSS
.te { font-size: 20pt; }
.none { text-emphasis-style: none; }
.filled { text-emphasis-style: filled; }
.open { text-emphasis-style: open; }
.string { text-emphasis-style: 'x'; }
.filled-dot { text-emphasis-style: filled dot; }
.filled-circle { text-emphasis-style: filled circle; }
.filled-double-circle { text-emphasis-style: filled double-circle; }
.filled-triangle { text-emphasis-style: filled triangle; }
.filled-sesame { text-emphasis-style: filled sesame; }
.open-dot { text-emphasis-style: open dot; }
.open-circle { text-emphasis-style: open circle; }
.open-double-circle { text-emphasis-style: open double-circle; }
.open-triangle { text-emphasis-style: open triangle; }
.open-sesame { text-emphasis-style: open sesame; }
HTML
<div>
<span class="te none">いろは</span>
<span class="te filled">いろは</span>
<span class="te open">いろは</span>
<span class="te string">いろは</span>
</div>
<div>
<span class="te filled-dot">いろは</span>
<span class="te filled-circle">いろは</span>
<span class="te filled-double-circle">いろは</span>
<span class="te filled-triangle">いろは</span>
<span class="te filled-sesame">いろは</span>
</div>
<div>
<span class="te open-dot">いろは</span>
<span class="te open-circle">いろは</span>
<span class="te open-double-circle">いろは</span>
<span class="te open-triangle">いろは</span>
<span class="te open-sesame">いろは</span>
</div>
表示
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは
いろは