rt { display: inline; font: inherit; } rtc::before { content: "（"; } rtc::after { content: "）"; } rb + rt::before, rtc + rt::before { content: "（"; } rb ~ rt:last-child::after, rt + rb::before { content: "）"; } rt + rtc::before { content: "）（"; }

<p lang="ja"><ruby><rb>水</rb><rb>芝</rb><rb>居</rb><rt>みず</rt><rt>ばい</rt><rt>し</rt></ruby></p> <p lang="ja" id="vertical"><ruby><rb>水</rb><rb>芝</rb><rb>居</rb><rt>みず</rt><rt>ばい</rt><rt>し</rt></ruby></p>