在網(wǎng)頁(yè)設(shè)計(jì)中，列表是不可避免的元素之一。而無(wú)序列表是其中一個(gè)非常常用的列表類型，特別是在導(dǎo)航菜單設(shè)計(jì)中常常被使用。但是有時(shí)候我們想給無(wú)序列表的每一項(xiàng)增加下劃線，以便更好地區(qū)分每一項(xiàng)。這個(gè)問(wèn)題如何解決呢？

<ul class="underline">
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>

以上是一段HTML和CSS代碼，可以實(shí)現(xiàn)無(wú)序列表加下劃線的效果。我們只需要在需要加下劃線的列表外部增加一個(gè)span元素，并給它一個(gè)class名為underline。接著在CSS中定義underline類使下劃線生效，再通過(guò)ul.underline li的組合選擇器來(lái)去除列表項(xiàng)原本的圓點(diǎn)符號(hào)，并用:before偽元素添加一個(gè)實(shí)心圓，用于代替原來(lái)的圓點(diǎn)。

這樣一來(lái)，我們就可以通過(guò)CSS實(shí)現(xiàn)給無(wú)序列表加下劃線的效果了。當(dāng)然，如果你使用的是有序列表也是類似的方法。