CSSで文字の上に「・」を置きたい

質問

「席に着くとまずはらみを注文する」をテキストで出したい時、このままだとわかりづらいので、「はらみ」の上に「・」を置きたいと考えています。

CSSで表現する場合、下記で良いのでしょうか。
ソース的にちょっと微妙な気もするのですが…。
-------------------
<ruby>
は<rt>・</rt>
ら<rt>・</rt>
み<rt>・</rt>
</ruby>
-------------------
よろしくお願いします。

回答No.1

Proof4 · ベストアンサー

確認しました。
微妙かもしれませんがこのソースでダメということでもなさそうです。

ほかの方法としては疑似要素もありかなと思いました。
--- HTML ---
<span class="ruby">
<span>は</span>
<span>ら</span>
<span>み</span>
</span>
--- CSS ---
.ruby>span{
position: relative;
}
.ruby>span::before{
content: '・';
display: inline-block;
width: 2em;
height: 1em;
position: absolute;
top: -1em;
font-size: 50%;
text-align: center;
}

参考URL：

http://caniuse.com/#search=ruby

お礼

回答ありがとうございます。
なるほど！疑似要素のほうが、変に意味が追加されず良いかもですね。