html 的選單標籤(ul, ol, li)之類的可以自訂選單的樣式,這邊來說明該怎麼使用特殊符號來定義選單前面的圖案。
首先準備 html
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
在 CSS 先取消選單的預設樣式:
ul{ list-style: none; }
接著再使用偽元素設定特殊符號到 li 前面:
ul li:before { content: "\266A"; }
content 設定的是 ASCII 的編碼,可以參考 ASCII 編碼列表找自己喜歡的,而我則是有找到埃及文字的特殊符號,有興趣也可以試看看。