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

82

목록 텍스트 앞에 눈금 기호를 추가하려는 목록이 있습니다. 이런 방식으로 적용하는 데 도움이되는 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>

스 니펫 확장

css html special-characters

— 스택 오버플로 영웅
소스

144

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

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>

스 니펫 확장

— 조쉬 크로 지어
소스

나는 이것을 사용했고 Chrome 65에서 작동합니다. 일반적으로 1px 단색 테두리를 사용하여 각 <li>를 래핑 할 수 있었고 ul li : before에서 왼쪽 및 여백 오른쪽에 부동-테두리 색상을 요소의 배경으로 설정할 수 있습니다.

— ymasood

솔루션에 감사드립니다! 포장시 들여 쓰기가 손실된다는 메모를 추가했습니다. (게시물을 편집 사과,하지만 그것은 단지 코멘트를 더 이상 문제를 설명하기에 떠난다, 잘하면 우리가 처리 할 수있는 방법을 찾을 수 있습니다.)

— 댄 Dascalescu

@Josh : Adam의 대답 에는 포장 문제에 대한 해결책이 있습니다. 명확성을 위해 편집했습니다. 포함 할 수 있습니다.

— Dan Dascalescu 19

32

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

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

참조 :

— 마이클 벤자민
소스

이것은 Josh Crozier의 대답과 다르지 않으며 포장에서 들여 쓰기를 파괴 하는 동일한 문제로 고통받습니다 . 또한 마지막 캐릭터는 Chromium / Ubuntu에서도 바이올린에 표시되지 않지만 어쨌든 요점은 아닙니다. Josh의 대답은 솔루션의 요점입니다. 사용할 체크 표시 문자는 디자인 선택입니다.

— Dan Dascalescu

1

@ DanDascalescu,이 답변은 일부 사람들이 알지 못하는 체크 표시 옵션을 제공함으로써 Josh Crozier의 솔루션을 확장합니다. 그것은 귀중한 정보입니다. 그들이 "디자인 선택"이라는 사실이이 대답을 덜 유용하게 만들지는 않습니다. (1) 답변이 많은 사람들에게 유용했고 (거의 찬성 30 개가 있음), (2) 답변이 스타일 선택 이외의 것으로 가장하지 않으며, (3) I ( "어쨌든 점 외에"당신이 말한대로이다) 다른 문제를 해결하기 위해 시도되지 않았다

— 마이클 벤자민

1

확인 표시 선택 항목 "\ 2713"및 "\ 2714"는 원시 유니 코드 코드 포인트입니다. 나는 그들이 어떻게 생겼는지 볼 수 없습니다. 답변에 스타일을 선택하려는 경우 실제 확인 표시가 포함될 수 있습니다 : ✓, ✔, ☑, ✅. 사용할 체크 표시는 흥미로운 문제가 아닙니다. 체크 표시 사용 방법입니다. 나는 그것을 "현재 물 속에있는 배를 어떻게 칠할 수 있는가?"와 "나는 그것을 어떤 파란색 음영으로 칠할 수 있는가"라고 봅니다. 말이 돼?

— Dan Dascalescu 19

귀하는 원하는 관점에서이 답변을 볼 권리가 있습니다. 나는 당신의 의견으로 논쟁하지 않을 것입니다. 그러나 사실이 게시물을 방문하는 대다수의 사람들은이 답변이 유용하다고 생각합니다. 그냥 그대로 두겠습니다. 피드백을 주셔서 감사합니다. @DanDascalescu

— Michael Benjamin

2

사람들은 여러 가지 이유로 찬성합니다. 사람들은 당신과 다른 이유로 찬성합니다. 이 답변의 내용에 동의하지 않습니다. 대답이 잘못되었거나 구식이라고 말하는 것이 아니라 (참조한 링크에서와 같이) 마음에 들지 않습니다. 저도 괜찮습니다. 당신은 당신의 의견에 대한 권리가 있습니다.

— Michael Benjamin

22

솔루션에 추가 :

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 에서 색상을 추가하고 크기를 변경하는 방법을 확인하십시오.

— 아담 올로프
소스

6

<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';
   }

— 히텐 드라 싱 셰 카왓
소스

Adam의 대답은 래핑 문제에 대해 다루었지만 많은 추가 코드가 필요했습니다. 간격은 나에게 약간의 영향을 미쳤 기 때문에 <li>에서 체크 표시 간격을 유지하기 위해 끝에 \ 1 \ 1을 추가했습니다.

— Jaden Baptista