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 編碼列表找自己喜歡的,而我則是有找到埃及文字的特殊符號,有興趣也可以試看看。