스팬을 사용하지 않고 HTML 목록의 글 머리 기호 색상 변경

스팬을 사용하지 않고 HTML 목록의 글 머리 기호 색상 변경

---

목록에있는 글 머리 기호의 색상을 변경하는 방법이 있는지 궁금합니다.

다음과 같은 목록이 있습니다.

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

내가 'span'og a 'p'와 같은 li 's에 아무것도 삽입하는 것은 불가능합니다. 글 머리 기호의 색상은 바꿀 수 있지만 텍스트는 바꿀 수 없나요?

---

이미지를 사용할 수 있으면 이렇게 할 수 있습니다. 이미지가 없으면 글 머리 기호의 색상 만 변경할 수없고 텍스트는 변경할 수 없습니다.

이미지 사용

li { list-style-image: url(images/yourimage.jpg); }

보다

목록 스타일 이미지

이미지를 사용하지 않고

그런 다음 HTML 마크 업을 편집하고 목록 내부에 범위를 포함하고 다른 색상으로 li 및 범위에 색상을 지정해야합니다.

---

마크 업을 추가하지 않고 관리했지만 대신 li:before. 이것은 분명히 :before(이전 IE 지원 없음) 의 모든 한계를 가지고 있지만 매우 제한된 테스트 후에 IE8, Firefox 및 Chrome에서 작동하는 것 같습니다. 글 머리 기호 스타일은 또한 유니 코드에있는 항목에 의해 제한됩니다.

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

---

우리는 s list-style-image와 결합 할 수 있습니다 svg. 이것은 css에서 인라인 할 수 있습니다 ! 이 방법은 무엇이든 될 수있는 "총알"에 대한 놀라운 제어를 제공합니다.

빨간색 원을 얻으려면 다음 css를 사용하십시오.

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

그러나 이것은 시작에 불과합니다. 이것은 우리가 그 총알로 우리가 원하는 미친 일을 할 수있게합니다. 원이나 직사각형은 쉽지만 그릴 수있는 것은 무엇이든 svg붙일 수 있습니다! 아래 불즈 아이 예를 확인하세요.

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

너비 / 높이 속성

Some browsers require width and height attributes to be set on the <svg>, or they display nothing. At time of writing, recent versions of Firefox exhibit this problem. I've set both attributes in the examples.

Encodings

A recent comment reminded me of encodings for the data-uri. This was a pain-point for me recently, and I can share a bit of information I've researched.

The data-uri spec, which references the URI spec, says that the svg should be encoded according to the URI spec. That means all sorts of characters should be encoded, eg < becomes %3C.

Some sources suggest base64 encoding, which should fix encoding issues, however it will unnecessarily increase the size of the SVG, whereas URI encoding will not. I recommend URI encoding.

More info:

browser-support: >ie8

css tricks on svgs

mdn on svgs

---

Building off @Marc's solution -- since the bullet character is rendered differently with different fonts and browsers, I used the following css3 technique with border-radius to make a bullet that I have more control over:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

---

I know this is a really, really, old question but i was playing around with this and came up with a way i have not seen posted. Give the list a color and then overwrite the text color using ::first-line selector. I'm no expert so maybe there is something wrong with this approach that I'm missing, but it seems to work.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

---

Building off both @Marc and @jessica solutions - This is the solution that I use:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

I use em for font sizes so if you set your top value to be .5em it will always be placed to the mid point of your first line of text. I used left:-20px because that is the default position of bullets in browsers: parent padding/2

---

I really liked Marc's answer too - I needed a set of different colored ULs and obviously it would be easier just to use a class. Here is what I used for orange, for example:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Plus, I found that the hex code I used for "content:" was different than Marc's (that hex circle seemed to sit a bit too high). The one I used seems to sit perfectly in the middle. I also found several other shapes (squares, triangles, circles, etc.) right here

---

For me the best option is to use CSS pseudo elements, so for disc bullet styling it would look like that:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Notes:

• width and height should have equal values to keep pointers rounded
• you may set border-radius to zero if you want to have square list bullets

For more bullets styles you may use other css shapes https://css-tricks.com/examples/ShapesOfCSS/ (choose this which doesn't require pseudo elements to work, so for example triangles)

---

::marker

You can use the ::marker CSS pseudo-element to select the marker box of a list item (i.e. bullets or numbers).

ul li::marker {
  color: red;
}

Note: At the time of posting this answer, this is considered experimental technology and has only been implemented in Firefox and Safari (so far).

---

Building on @ddilsaver's answer. I wanted to be able to use a sprite for the bullet. This appears to work:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

---

I tried this today and typed this:
I needed to display color markers in my lists (both bullets and numbers). I came upon this tip and wrote in in my stylesheet whith mutualization of the properties:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

I chose a different character to display a bullet, watching it here. I needed to adjust the margin accoardingly, maybe the values won't apply with the font you chose (the numbers use your webfont).

---

Try using this instead:

ul {
  color: red;
}

참고URL : https://stackoverflow.com/questions/1470214/change-bullets-color-of-an-html-list-without-using-span