이미지 또는 범위 태그를 사용하지 않고 CSS를 통해 UL / LI html 목록에서 글 머리 기호 색상을 설정하는 방법

질문 : 이미지 또는 범위 태그를 사용하지 않고 CSS를 통해 UL / LI html 목록에서 글 머리 기호 색상을 설정하는 방법

---

<li> 항목이있는 단순한 정렬되지 않은 목록을 상상해보십시오. list-style:square; 를 통해 정사각형 모양으로 정의했습니다. <li> 항목의 색상을 색상으로 설정하면 color: #F00; 그러면 모든 것이 빨갛게됩니다!

정사각형 글 머리 기호의 색상 만 설정하고 싶습니다. CSS에서 글 머리 기호의 색상을 정의 하는 우아한 방법 이 있습니까?

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

답변

---

이를 수행하는 가장 일반적인 방법은 다음과 같은 방법입니다.

 

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}

<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle : http://jsfiddle.net/leaverou/ytH5P/

버전 8 이상의 IE를 포함한 모든 브라우저에서 작동합니다.

출처 : https://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or