增加UL列表項目符號的寬度

Question

如何設計UL列表項目符號的樣式。 我使用正方形，我需要的是增加寬度。除了使用自定義圖像之外，有什麼辦法可以做到嗎？ 謝謝

Answer 1

這樣的事情，使用::before和使用content CSS：

ul li { 
 
    list-style: none; 
 
} 
 
ul li::before { 
 
    content: ""; 
 
    display: block; 
 
    border: 2px solid #000; 
 
    width: 10px; 
 
    margin-left: -20px; 
 
    margin-top: 1em; 
 
    margin-bottom: -0.67em; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

預覽