CSS 이모티콘 목록 스타일

제 기사에서 보셨겠지만 저는 Emojis의 열렬한 팬입니다.

오늘은 이모티콘을 목록 아이콘으로 사용하는 방법을 살펴보겠습니다.
이 기사에서는 안정적인 방법을 사용할 것입니다.
내일 우리는 이것을 하는 새로운 방법을 탐구할 것입니다.

최종 결과는 왼쪽 목록을 이 오른쪽 목록으로 변환하는 것입니다.

이 Codepen을 사용하여 사용해보십시오.

HTML 구조

<div>
  <h1>The big five!</h1>
  <ul>
    <li>Lion</li>
    <li>Leopard</li>
    <li>Rhino</li>
    <li>Elephant</li>
    <li>Buffalo</li>
  </ul>
</div>
<div>
  <h1>The big five!</h1>
  <ul class="styled">
    <li>Lion</li>
    <li>Leopard</li>
    <li>Rhino</li>
    <li>Elephant</li>
    <li>Buffalo</li>
  </ul>
</div>

동일한 목록을 두 번 볼 수 있듯이 두 번째 목록에만 클래스styled가 있습니다.

이제 우리는 지루한 목록과 멋진 이모티콘 목록을 구분하고 싶습니다!.

CSS 이모티콘 목록 스타일

이모티콘 목록 스타일을 얻으려면 먼저 목록에서 실제 스타일을 제거합니다.
list-style: none는 기본 글머리 기호를 제거한 다음 패딩과 여백을 0으로 설정합니다.

.styled {
  list-style: none;
  padding: 0;
  margin: 0;
}

다음 단계는 목록 항목에 약간의 공간을 제공하는 것입니다.

이렇게 하면 before 선택기를 사용하여 이모티콘을 표시할 수 있는 왼쪽에 들여쓰기가 제공됩니다.

.styled li {
  padding-left: 1rem;
  text-indent: -0.75rem;
}

그리고 세 번째이자 마지막 단계인 이모티콘을 선보입니다.

before selector을 사용하여 동물의 내용을 배치하고 있습니다.

.styled li::before {
  content: "🦁 ";
}

이제 nth-child 선택기를 사용하여 다른 동물을 처리할 수 있습니다.

.styled li:nth-child(2)::before {
  content: "🐆 ";
}
.styled li:nth-child(3)::before {
  content: "🦏 ";
}
.styled li:nth-child(4)::before {
  content: "🐘 ";
}
.styled li:nth-child(5)::before {
  content: "🐃 ";
}

그것은 더 멋진 목록입니다!

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는