如何用HTML和CSS中的虚线获取特定单词？

Question

我有以下文字：

1. 我吃酸奶早上

2. 酸奶是非常好的

3. 早上吃酸奶是健康

我想要用虚线强调“酸奶”一词。

只要用<u>标签下划线很容易，但我很困惑如何让特定单词用点划线。

Answer 1

这样做的一种方法是使用虚线border。

演示：http://jsfiddle.net/HhRT5/

<ol> 
    <li>I ate <span class="yogurt">yogurt</span> in the morning</li> 
    <li><span class="yogurt">yogurt</span> was very nice</li> 
    <li>eating <span class="yogurt">yogurt</span> in the morning is healthy</li> 
</ol> 

.yogurt { 
    border-bottom: 1px dotted #aaa; 
} 

• Possible future options with text-decoration-style