[CSS] 리스트 태그 꾸미기, 체크 표시하기

CSS에서 리스트 태그를 꾸미는 방법에 대한 안내입니다. 체크 표시를 추가할 수 있습니다.

<head>
  <style>
    li {
      list-style-type: none;
      padding-left: 25px;
      line-height: 1.5;
    }
    
    li::before {
      content: '';
      display: inline-block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #3CB371;
      margin-right: 5px;
      vertical-align: middle;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.75 16.75L4 12l1.41-1.41L8.75 14.59 18.34 5l1.41 1.41L8.75 16.75z" fill="white"/></svg>');
      background-size: 70%;
      background-repeat: no-repeat;
      background-position: center bottom 2px;
    }
  </style>
</head>
<body>
  <ul>
    <li>안녕하세요</li>
    <li>범상입니다</li>
  </ul>
</body>

댓글