/* 当文字的排版的书写顺序是水平排版布局,类似 writing-mode: lr 时,只需要用到 over、under 即可,当文本的排版布局模式是垂直模式时,类似 writing-mode: vertical-lr,才会用到 right 或者 left 关键字。 */ p { writing-mode: vertical-rl; } .keyword { text-emphasis: circle #f00; } .word { text-emphasis: 'x' blue; text-position: over left; } .emoji { text-emphasis: '😋'; text-position: under right; } <p> A B C D <span class="keyword">E F</span> G H <span class="word">I J</span> K L <span class="emoji">M N</span> </p>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter