html - HTMLとCSSで点線で特定の単語を取得する方法は?

Question

次のテキストがあります。

1. 朝ヨーグルト食べた

2. ヨーグルトがとても美味しかった

3. 朝ヨーグルトを食べると健康に良い

「ヨーグルト」という単語に点線で下線を付けたいです。

タグで下線を引くのは簡単<u>ですが、特定の単語にドットで下線を引く方法がわかりません。

Answer 1

それを行う 1 つの方法は、点線の境界線を使用することです。

デモ: 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;
}

• 可能な将来のオプションtext-decoration-style