[css] 순서가 지정되지 않은 목록에서 글 머리 기호 대신 체크 / 체크 표시 기호 (✓)를 사용하는 방법은 무엇입니까?

Program / 글쓴이

목록 텍스트 앞에 눈금 기호를 추가하려는 목록이 있습니다. 이런 방식으로 적용하는 데 도움이되는 CSS가 있습니까?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

참고 :이 유형의 HTML 코드에서 이것을 원합니다.

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

스 니펫 확장

답변

의사 요소 를 사용하여 각 목록 항목 앞에 해당 문자를 삽입 할 수 있습니다 .

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

스 니펫 확장

답변

사용할 수있는 세 가지 체크 표시 스타일은 다음과 같습니다.

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

스 니펫 확장

jsFiddle

참조 :

답변

솔루션에 추가 :

ul li:before {
 content: '✓';
}

Font Aswesome 과 같은 SVG 아이콘을 내용으로 사용할 수 있습니다 .

여기에 이미지 설명 입력

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

스 니펫 확장

참고 : 다른 답변의 래핑 문제를 해결하려면 다음을 수행하십시오.

  • 우리는 각각의 왼쪽에 1.5m ems의 공간을 예약합니다 <li>
  • 그런 다음 해당 공간 ( position: absolute; left: 0) 의 시작 부분에 SVG를 배치합니다.

Font Awesome 검은 색 아이콘 이 더 있습니다.

이 CODEPEN 에서 색상을 추가하고 크기를 변경하는 방법을 확인하십시오.

답변

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

이 간단한 CSS 스타일을 사용할 수 있습니다.

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

답변