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

Program / 글쓴이

목록에있는 총알의 색상을 변경하는 방법이 있는지 궁금합니다.

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

<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붙일 수 있습니다! 아래 불즈 아이 예를 확인하세요.

코드 스 니펫 표시

너비 / 높이 속성

일부 브라우저는에 width및 height속성을 설정해야합니다 <svg>. 그렇지 않으면 아무것도 표시하지 않습니다. 글을 쓰는 시점에서 최신 버전의 Firefox는이 문제를 나타냅니다. 예제에서 두 속성을 모두 설정했습니다.

인코딩

최근 댓글에서 data-uri에 대한 인코딩이 생각났습니다. 이것은 최근 저에게 고통스러운 점이었고 제가 조사한 정보를 약간 공유 할 수 있습니다.

데이터 URI 스펙 되는 참조 1, URI 사양은 상기 SVG는에 따라 인코딩되어야한다고 말한다 URI 사양 . 즉, 모든 종류의 문자를 인코딩해야합니다 (예 <🙂 %3C.

일부 소스에서는 인코딩 문제를 해결해야하는 base64 인코딩을 제안하지만 SVG의 크기를 불필요하게 늘리는 반면 URI 인코딩은 그렇지 않습니다. URI 인코딩을 권장합니다.

더 많은 정보:

브라우저 지원 : > ie8

SVG에서 CSS 트릭

SVG의 mdn

답변

@Marc의 솔루션 구축-글 머리 기호 문자는 다른 글꼴과 브라우저에서 다르게 렌더링되기 때문에 테두리 반경과 함께 다음 css3 기술을 사용하여 더 많은 제어 권한을 가진 글 머리 기호를 만들었습니다.

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

답변

나는 이것이 정말, 정말, 오래된 질문이라는 것을 알고 있지만 나는 이것을 가지고 놀았고 내가 게시하지 않은 방법을 생각해 냈습니다. 목록에 색상을 지정한 다음 ::first-line선택기를 사용하여 텍스트 색상을 덮어 씁니다 . 저는 전문가가 아니기 때문에 제가 놓치고있는이 접근 방식에 문제가있을 수 있지만 작동하는 것 같습니다.

li {
  color: blue;
}

li::first-line {
  color: black;
}
<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

스 니펫 확장

답변

@Marc 및 @jessica 솔루션 구축-이것이 제가 사용하는 솔루션입니다.

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

나는 em글꼴 크기에 사용하므로 top값을 설정 .5em하면 항상 첫 번째 텍스트 줄의 중간 지점에 배치됩니다. left:-20px브라우저에서 글 머리 기호의 기본 위치이기 때문에 사용했습니다 . padding/2

답변

나는 Marc의 대답도 정말 좋아했습니다. 다른 색상의 UL 세트가 필요했으며 분명히 클래스를 사용하는 것이 더 쉬울 것입니다. 예를 들어 다음은 주황색에 사용한 것입니다.

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

또한 “content :”에 사용한 16 진수 코드가 Marc의 코드와 다르다는 것을 발견했습니다 (16 진수 원이 너무 높게 위치하는 것 같음). 내가 사용한 것은 중간에 완벽하게 앉아있는 것 같습니다. 여기에서 여러 다른 모양 (사각형, 삼각형, 원 등)도 발견 했습니다.