text-emphasis-position 「圏点の位置を指定」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-over-right{text-emphasis-position : over right;}
.css-under-left{text-emphasis-position : under left;}

.css-filled{
  text-emphasis : filled;
}
.css-writing-mode{
  writing-mode: tb-rl;
  height: 100px;
}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">text-emphasis-position:over right<br>（上段表示）</div>
  <div>
  <span class="css-over-right css-filled">上段表示確認</span>
  </div>
  <div class="cssTitle">text-emphasis-position:under left<br>（下段表示）</div>
  <div>
  <span class="css-under-left css-filled"><rb>下段表示確認</span>
  </div>
  <div class="cssTitle">text-emphasis-position:over right<br>（右側表示）</div>
  <div class="css-writing-mode">
  <span class="css-over-right css-filled"><rb>右側表示確認</span>
  </div>
  <div class="cssTitle">text-emphasis-position:under left<br>（左側表示）</div>
  <div class="css-writing-mode">
  <span class="css-under-left css-filled"><rb>左側表示確認</span>
  </div>
</div>