在CSS中，為li元素添加下劃線是一個(gè)常見的需求，我們使用text-decoration屬性來(lái)實(shí)現(xiàn)這一功能，以下是一些示例代碼，展示如何為li元素添加下劃線：

示例 1: 使用text-decoration屬性

li {
    text-decoration: underline;
}

示例 2: 使用border-bottom屬性

另一種方法是使用border-bottom屬性來(lái)創(chuàng)建下劃線：

li {
    border-bottom: 1px solid #000;
}

示例 3: 使用偽元素::after

我們還可以使用偽元素::after來(lái)創(chuàng)建下劃線：

li {
    position: relative;
}
li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #000;
}

示例 4: 使用text-decoration-style屬性

CSS3引入的text-decoration-style屬性可以用來(lái)改變下劃線的樣式：

li {
    text-decoration: underline;
    text-decoration-style: double; /* 雙線樣式 */
}

應(yīng)用場(chǎng)景

在實(shí)際應(yīng)用中，你可能會(huì)遇到需要為列表項(xiàng)添加下劃線的情況，

導(dǎo)航菜單：在導(dǎo)航菜單中，為鏈接添加下劃線可以使其更加醒目。

列表樣式列表中，為列表項(xiàng)添加下劃線可以改善其可讀性。

表單驗(yàn)證：在表單驗(yàn)證中，為驗(yàn)證通過的字段添加下劃線可以表示其有效性。

示例代碼應(yīng)用

假設(shè)你有一個(gè)簡(jiǎn)單的HTML列表：

<ul>
    <li>項(xiàng)目1</li>
    <li>項(xiàng)目2</li>
    <li>項(xiàng)目3</li>
</ul>

你可以使用以下CSS代碼為列表項(xiàng)添加下劃線：

li {
    text-decoration: underline; /* 使用下劃線 */
}

這樣，每個(gè)列表項(xiàng)下面都會(huì)有一條下劃線，希望這些示例能幫助你更好地理解和應(yīng)用CSS中的下劃線樣式。