CSS 목록 스타일 생성기

CSS list-style 속성을 생성하세요. 사용자 정의 목록 마커, 이미지, 위치를 지원합니다.

16px
40px
1.6
Preview
  • Item 1
  • Item 2
  • Item 3
Sample Items
CSS Code

CSS 목록 스타일 생성기 소개

이 도구는 CSS list-style 속성을 생성하여 목록의 모양을 사용자 정의합니다. 다양한 마커 스타일, 이미지, 위치를 지원합니다.

기능

Frequently Asked Questions

What is the CSS ::marker pseudo-element?

The ::marker pseudo-element targets the list marker box of a list item. It allows you to style bullets and numbers with custom colors, fonts, and sizes. Modern browsers support ::marker, but the generator also provides fallback CSS for older browsers.

Can I use custom images as list markers?

Yes, you can use the list-style-image property or the ::marker pseudo-element with content. The generator supports both approaches. For best results, use small SVG or PNG images (16x16px to 24x24px).

What browsers support ::marker?

The ::marker pseudo-element is supported in all modern browsers including Chrome 86+, Firefox 68+, Safari 11.1+, and Edge 86+. For older browsers, the generator provides fallback CSS using standard list-style properties.

How do I change the color of list numbers?

Use the ::marker pseudo-element with the color property. The generated CSS includes this automatically. For ordered lists, this changes the color of the numbers while keeping the list item text in its original color.