예를 들어, 목록 항목의 글 머리 기호로 star-symbol (★)을 사용해야합니다.

CSS3 모듈 : Lists를 읽었으며 사용자 지정 텍스트를 글 머리 기호로 사용하는 방법을 설명했지만 저에게는 작동하지 않습니다. 제 생각에는 브라우저는 단순히 ::marker의사 요소를 지원하지 않습니다 .

이미지를 사용하지 않고 어떻게 할 수 있습니까?

편집하다

더 이상 이미지를 사용하지 않는 것이 좋습니다. 다음과 같이 유니 코드 문자를 사용하는 방법을 고수합니다.

li:before {
  content: "\2605";
}

오래된 답변

나는 아마도 이미지 배경으로 갈 것입니다. 훨씬 더 효율적입니다. 다목적이며 브라우저 간 친화적입니다.

예를 들면 다음과 같습니다.

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

글 머리 기호로 텍스트 사용

li:before이스케이프 된 Hex HTML 엔티티 (또는 일반 텍스트)와 함께 사용 합니다.

예

내 예에서는 확인 표시가있는 목록을 글 머리 기호로 생성합니다.

CSS :

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

브라우저 호환성

직접 테스트하지는 않았지만 IE8에서 지원되어야합니다. 적어도 그것이 quirksmode 및 css-tricks입니다 말하는 것입니다.

조건부 주석을 사용하여 이미지 또는 스크립트와 같은 이전 / 느린 솔루션을 적용 할 수 있습니다. 더 나은 방법은 두 가지를 모두 <noscript>이미지에 사용 하는 것입니다.

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

배경 이미지 정보

배경 이미지는 정말 다루기 쉽지만 ...

1. 브라우저 지원 background-size 은 실제로 IE9에서만 제공됩니다.
2. HTML 텍스트 색상 및 특수 ( 미친 ) 글꼴은 적은 HTTP 요청으로 많은 일을 할 수 있습니다.
3. 스크립트 솔루션은 HTML 엔티티를 주입하고 동일한 CSS가 작업을 수행하도록 할 수 있습니다.
4. 좋은 재설정 CSS 코드는 list-style(보다 논리적 선택) 더 쉽게 만들 수 있습니다 .

즐겨.

다음과 같이 구성 할 수 있습니다.

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

이것이 W3C 솔루션입니다. 3012에서 사용할 수 있습니다!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

이미지는 일부 기기 (Retina 디스플레이가있는 Apple 기기)에서 픽셀 화로 표시되거나 확대 할 때 표시 될 수 있으므로 권장하지 않습니다. 캐릭터를 사용하면 목록이 매번 멋지게 보입니다.

지금까지 찾은 최고의 솔루션입니다. 훌륭하게 작동하며 크로스 브라우저 (IE 8+)입니다.

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

중요한 것은 텍스트가 너무 길어서 한 줄에 맞지 않는 경우 텍스트가 정렬 된 상태로 유지되도록 고정 너비의 부동 블록에 문자를 포함하는 것입니다. 1.2em 은 캐릭터에 대해 원하는 너비이며 필요에 따라 변경하십시오. ul 및 li 요소의 패딩과 여백을 재설정하는 것을 잊지 마십시오.

편집 : ul 및 li : before에서 다른 글꼴을 사용하는 경우 "1.2em"크기가 다를 수 있습니다. 픽셀을 사용하는 것이 더 안전합니다.

별표를 추가하려면 유니 코드 문자를 사용하십시오 22C6.

li별과 별 사이에 약간의 간격을두기 위해 공간을 추가했습니다 . 공간 코드는 A0.

li:before {
    content: '\22C6\A0';
}

222의 대답에 대한 더 완전한 예 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

이전 IE 버전에서 기본 목록 스타일을 복원하기 위해 스타 해킹 속성을 포함했습니다. 원하는 경우이를 꺼내서 조건부 포함에 포함하거나 배경 이미지 기반 솔루션으로 대체 할 수 있습니다. 저의 겸손한 의견은 이러한 방식으로 구현 된 특수 총알 스타일은 의사 선택기를 지원하지 않는 몇몇 브라우저에서 우아하게 저하되어야한다는 것입니다.

Firefox, Chrome, Safari 및 IE8-10에서 테스트되었으며 모두 올바르게 렌더링됩니다.

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

이 전체 목록을 살펴 보았고 2020 년까지 부분적으로 정확하고 부분적으로 잘못된 요소가 있습니다.

UTF-8을 사용할 때 들여 쓰기와 오프셋이 가장 큰 문제라는 것을 알았으므로 "직립 삼각형"글 머리 기호를 예제로 사용하여 2020 호환 CSS 솔루션으로 게시합니다.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

em글꼴 크기와 충돌을 피하기 위해 단위로 사용

이 코드를 사용해보세요 ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

이 항목은 오래되었을 수 있지만 빠른 수정 ul {list-style:outside none square;}또는 ul {list-style:outside none disc;}등이 있습니다.

그런 다음 목록 요소에 왼쪽 패딩을 추가하십시오.

ul li{line-height: 1.4;padding-bottom: 6px;}