html - 如何在 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