css 给文本添加强调符号

• #css

先看示例，下面这个效果如何实现呢？

css 有个属性叫做 text-emphasis，作用是给文本添加强调符号。

<div style="width: 230px; height: 80px; border: 1px solid green;">
    床前明月光，
    <span style="text-emphasis: filled;">疑是地上霜。</span>
    举头望明月，
    低头思故乡。
</div>

默认是在文本的顶部显示黑色小圆点。

如果想改变强调符号的颜色，可以使用 text-emphasis-color 属性。

如果想改变强调符号的位置，将强调符号放在文本下方，可以使用 text-emphasis-position 属性。

如果想改变强调符号的样式，比如想用三角形而不是小圆点表示强调符号，可以使用 text-emphasis-style 属性。

text-emphasis-style 的属性值有很多:

• filled 表示实心图形(默认值)，open 表示空心图形，同时只能存在一个；
• dot 小圆点，circle 小圆圈，double-circle 双圆圈，triangle 三角形，sesame 芝麻；
• 还可以是字符串，超过一个字符的字符串只有第一个字符生效；

介绍到这里，最上面那个效果实现起来就非常简单了。强调符号使用空心三角形，位置放在文本下方。

<div style="width: 230px; height: 80px; border: 1px solid green;">
    床前明月光，
    <span style="text-emphasis-style: open triangle; text-emphasis-position: under;">疑是地上霜。</span>
    举头望明月，
    低头思故乡。
</div>

↶ 返回首页 ↶