HTML 목록 글머리 기호를 대시 기호로 바꾸는 방법은 무엇입니까?

대시 기호를 사용하여 HTML에서 목록 스타일 사용자 정의

HTML에서 기본 목록 스타일은 디스크나 사각형으로 렌더링되지만 대시 기호를 사용하여 글머리 기호를 사용자 정의하고 싶을 수도 있습니다. 이를 달성하려면 CSS를 활용하여 목록 모양을 수정할 수 있습니다.

:before 의사 클래스 사용

한 가지 접근 방식은 :before 의사 클래스를 사용하여 각 목록 항목 앞에 대시를 입력하세요. 이 기술을 사용하면 대시를 추가하는 동안 표준 목록 들여쓰기를 유지할 수 있습니다. 그러나 이 접근 방식은 CSS 지원의 변화로 인해 다양한 브라우저에서 잠재적인 호환성 문제를 일으킬 수 있습니다.

목록 스타일 유형과 텍스트 들여쓰기 결합

더 안정적인 방법입니다. 해결책은 list-style-type: none을 사용하여 기본 글머리 기호를 제거한 다음 text-indent를 음수 값으로 설정하여 들여쓰기 목록 효과를 유지하는 것입니다. 또한 :before를 사용하여 대시 기호를 삽입하면 브라우저 전체에서 일관된 렌더링을 보장할 수 있습니다.

예제 코드

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

사용 및 출력

HTML 내에서 순서가 지정되지 않은 목록(

)에 대시 클래스를 적용할 수 있습니다.

<code class="html">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</code>

이렇게 하면 유지하면서 대시를 글머리 기호로 사용하는 사용자 정의 목록이 생성됩니다. 목록 들여쓰기:

• First
• Second
• Third

• First

  • Second
  • 세 번째

이 방법은 브라우저 간 호환되며 기본 목록 스타일을 사용자 정의 대시로 효과적으로 대체합니다.

위 내용은 HTML 목록 글머리 기호를 대시 기호로 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!