CSS 文字装饰 text-decoration & text-emphasis · Issue #103 · chokcoco/iCSS

PHOTO EMBED

Thu Apr 29 2021 07:43:10 GMT+0000 (Coordinated Universal Time)

Saved by @ycljcfer 

/* 当文字的排版的书写顺序是水平排版布局，类似 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>
content_copyCOPY

https://github.com/chokcoco/iCSS/issues/103