HTML 목록 스타일 형식 대시 를 사용하여

대시 (예 :-또는 – –또는 — —) 를 사용하여 HTML로 목록 스타일을 만드는 방법이 있습니까?

<ul>
  <li>abc</li>
</ul>

출력 :

- abc

li:before { content: "-" };나는 그 옵션의 단점을 알지 못하지만 (그리고 피드백을 받아야 할 의무가 있지만) 와 같은 것을 사용 하여이 작업을 수행했습니다 .

더 일반적으로, 나는 목록 항목에 일반 문자를 사용하는 방법을 알고 싶지 않습니다.

답변

당신은 사용할 수 있습니다 :before및 content:이 아래 IE 7에서 지원되지 않는다는 것을 명심. 괜찮다면 이것이 최선의 해결책입니다. 자세한 내용은 Can I Use 또는 QuirksMode CSS 호환성 표를 참조하십시오.

구형 브라우저에서 작동해야하는 약간 더 나쁘지 않은 솔루션은 글 머리 기호에 이미지를 사용하고 이미지를 대시처럼 보이게 만드는 것입니다. 예제 는 W3C list-style-image페이지 를 참조하십시오 .

답변

:before의사 클래스로 들여 쓰기 된 목록 효과를 유지하는 쉬운 수정 (텍스트 들여 쓰기)이 있습니다.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

스 니펫 확장

답변

상대 또는 절대 위치가없고 텍스트 들여 쓰기가없는 버전이 있습니다.

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

즐겨 😉

답변

이것을 사용하십시오 :

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

답변

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em;
}

데모 바이올린

답변

내 자신의 선호하는 솔루션을 다시 찾기 위해 내 버전도 추가하겠습니다.

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}
<!--
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash'
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

스 니펫 확장

https://codepen.io/burningTyger/pen/dNzgrQ

답변

내 경우에는이 코드를 CSS에 추가

ul {
    list-style-type: '- ';
}

충분했다. 그대로 간단합니다.