list-style-type
Controls the bullet (marker) style of list items. lsn is the most commonly used, essential for removing default bullets to create custom lists.
Class List
| Class | CSS | Description |
|---|---|---|
lsn | list-style-type: none | Removes bullets. Starting point for custom lists |
lsd | list-style-type: disc | Filled circle bullet (ul default) |
lsc | list-style-type: circle | Empty circle bullet |
lssq | list-style-type: square | Filled square bullet |
lsde | list-style-type: decimal | Numeric marker (ol default) |
Visual Comparison
Compares how each bullet style is displayed on list items.
None — lsn
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
Disc — lsd
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
Circle — lsc
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
Square — lssq
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
Ordered List (decimal)
lsde uses numeric markers. Default for ol tags, but can also be applied to ul.
ol default -- lsde
- 단계 1: Settings 열기
- 단계 2: 옵션 선택
- 단계 3: 저장
decimal applied to ul -- lsde
- 비순서형이지만 숫자 표시
- 마커 스타일 변경 가능
- 유연한 사용
Practical Examples
A pattern for removing default bullets with lsn and applying custom styles.
<!-- Custom navigation menu -->
<nav>
<ul class="lsn p0 m0 df fdc gap4px">
<li class="py8px px16px br8px hover-bg18181B cp">
<a class="cFAFAFA tdn fs14px">Dashboard</a>
</li>
<li class="py8px px16px br8px hover-bg18181B cp">
<a class="cFAFAFA tdn fs14px">Settings</a>
</li>
<li class="py8px px16px br8px hover-bg18181B cp">
<a class="cFAFAFA tdn fs14px">Profile</a>
</li>
</ul>
</nav>
<!-- List reset + flex combination -->
<ul class="lsn p0 m0 df fww gap8px">
<li class="bg27272A py4px px12px br4px cFAFAFA fs14px">Tag 1</li>
<li class="bg27272A py4px px12px br4px cFAFAFA fs14px">Tag 2</li>
<li class="bg27272A py4px px12px br4px cFAFAFA fs14px">Tag 3</li>
</ul>Class Details
lsnlist-style-type: none
Completely removes default list bullets/number markers. Most commonly used for custom lists such as navigation, card lists, sidebar menus, etc.
<!-- Remove default bullets -->
<ul class="lsn p0 m0">
<li>Item without bullet</li>
<li>Clean list</li>
<li>Can apply custom styles</li>
</ul>
<!-- Navigation Menu -->
<ul class="lsn p0 m0 df gap2rem">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>Common Combinations
lsn p0 m0 | Complete list style reset |
lsn p0 m0 df gap2rem | Horizontal navigation menu |
lsn p0 m0 df fdc gap4px | Vertical sidebar menu |
lsn p0 m0 df fww gap8px | Tag/badge list |
lsdlist-style-type: disc
The default for ul. Displays a filled circle bullet. Used to explicitly restore default bullets.
<!-- Explicit disc bullets -->
<ul class="lsd pl2rem">
<li>Default circle bullet</li>
<li>Same as ul default</li>
<li>Used for explicit restoration</li>
</ul>lsclist-style-type: circle
Displays an empty circle bullet. Mainly used to distinguish sub-levels in nested lists.
<!-- Circle bullets -->
<ul class="lsc pl2rem">
<li>Hollow circle bullets</li>
<li>Suitable for nested list level 2</li>
<li>Lighter feel than disc</li>
</ul>lssqlist-style-type: square
Displays a filled square bullet. Used for design variation.
<!-- Square bullets -->
<ul class="lssq pl2rem">
<li>Square bullets</li>
<li>For design variation</li>
<li>Visual emphasis</li>
</ul>lsdelist-style-type: decimal
The default for ol. Displays numbered items (1, 2, 3...). Suitable for procedures, step-by-step guides, etc.
<!-- Ordered list -->
<ol class="lsde pl2rem">
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
<!-- Procedure guide -->
<ol class="lsde pl2rem df fdc gap8px">
<li>Create project</li>
<li>Install dependencies</li>
<li>Run dev server</li>
<li>Deploy</li>
</ol>Tips & Notes
List reset pattern
Combining lsn p0 m0 completely removes browser default list styles. Recommended as the base setup for custom navigation and menus.
Distinguishing markers in nested lists
Using lsd(disc) for level 1, lsc(circle) for level 2, and lssq(square) for level 3 visually distinguishes hierarchy.
Accessibility note
Even with lsn applied, screen readers recognize the list structure. Maintaining semantic markup (ul/ol) is important.